For example i got this html:
<div id="div1">
<div id="div2"></div>
</div>
div2 is display:none.
So is there a jquery method, to trigger a hover function on div1 that diplays div2.
like this:
$('#div1').hover(function(){
$('#div2').stop().fadeIn();
}, function(){
$('#div2').stop().fadeOut();
});
i've got a bigger code but its too large to post. Every function i tried works not so fine. I want to trigger the hover ONLY on the lowest layer element div1. But mostly if the fadeIn() is triggered and the cursor moves over it the hover effect on div1 ends.
Are there hover function that includes ALL child elements?
If I understand you want to fade in all children when the parent is hovered?
Seeing as you have CSS tagged in your question, I'll give a CSS answer:
Demo Fiddle
#div1 *{
opacity:0;
transition:opacity 200ms ease-in;
}
#div1:hover *{
opacity:1;
}
How about using Nth Child selector of Jquery. I couldn't paste an example here because I am currently outside.
But this should work if you read it.
http://api.jquery.com/nth-child-selector/
Related
I am adding mouseover event. According to my HTML code, the myDiv is appearing exactly on <img>. I am detecting mouseover on both <img> and myDiv.
But what happens, when I hover a mouse on <img> its working fine and it's detecting that it's hovered on image but when I hover on myDiv without leaving <img>, it's not detecting myDiv, it's still in <img>. How can I detect myDiv without leaving img.
Below is my code
My HTML code
<style>
.myDiv{
position:absolute;
}
.hoverEffect{
border: 2px solid #0044ff;
opacity: 0.5;
}
</style>
<div class="myDiv">
<h1>Heading</h1>
</div>
<img src="myimage.jpg">
JQuery Code
$('body').mouseover(function(e) {
//e.target For Detecting div or image
$(e.target).addClass('hoverEffect');
});
$('body').mouseout(function(e) {
$(e.target).removeClass('hoverEffect');
}
In below GIF image, you can see content "WELCOME TO OUR APP" in above image. And after hovering on image, it's not detecting this content which has another div.
Updated Information
In above JQuery code, I've added the class "hoverEffect" to hovered div. The only problem is in hoverEffect class and that is opacity. When I use opacity then it's not detecting myDiv but when I remove opacity from css code then it's working fine.
Working jsfiddle link (without using opacity)
Not Working jsfiddle link (with opacity)
My question is, why it's not working when I add opacity to the class?
If it's possible to do it without removing opacity from class then how to do this?
Did You tried z-index css property to take div front of img?
.myDiv{
z-index:10;
}
You can detect every element inside body, move your mouse and see at the console. Here is an example:
$('body').mouseover(function(e) {
console.log(e.target);
});
.myDiv{
position:absolute;
background-color:violet;
}
h1 {
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
<h1>Heading</h1>
</div>
<img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">
So let's say I have a parent div element that has an img child and that I want to execute some code when the parent element is hovered.
<div class="parent">
<img src="link_to_some_image" />
</div>
The issue here is that when the child img is hovered, the parent "hover state" breaks. How can I make it so that the parent keeps its hovered state even if its child elements are hovered?
Here is an example jsfiddle, try hovering on the empty space and then on the image http://jsfiddle.net/omrf0dxe/
Thanks a lot!
Edit: The img children is an example, it might be other type of elements as well like divs,links etc
Edit2: Ok, apparently the solution was to use mouseleave instead of mouseout when binding the "exit" event.
You are listening to the events mouseenter/mouseout.
You want the events mouseenter/mouseleave:
Example Here
$(".parent").on("mouseenter mouseleave", function () {
$(this).toggleClass('hovered');
});
As an alternative, you could also add pointer-events: none to the child img element in order to essentially remove mouse events from the element:
Updated Example
.parent > img {
pointer-events: none;
}
Depending on what you're trying to achieve, you may not even need JS, though.
Just use the :hover pseudo class.
Example Here
.parent {
width:400px;
height:400px;
background:blue;
}
.parent:hover {
background:red;
}
Pretty basic solution, not sure if you want yours to stay toggled, but I would attack it with a add/remove class.
$('.parent').hover(
function(){ $(this).addClass('hovered') },
function(){ $(this).removeClass('hovered') }
)
http://jsfiddle.net/omrf0dxe/7/
I have a hidden div and I need to to show it smoothly with different CSS styles, all styles may be changed easily except the "display". But this property is crucial, because when it start appearing, it will move other elements on the page differently. It will depends on the "display" property of the appearing element. Either next element will move right, or down.
I have 2 buttons - (show div as block) and (show div as inline block) and it should work, but it is not.
jsfiddle example
Here is another jsfiddle, showing how to change the display property on visible div. I need to change it while the div is hidden and then show it with new display property smoothly with simple ".toggle(500);".
$("#f").hide();
$(".toggle_h").bind("click", function(){
$("#f").hide();
})
$(".toggle_b").bind("click", function(){
$("#f")
.removeClass('i')
.addClass('b')
.toggle(500);
return false;
})
$(".toggle_i").bind("click", function(){
$("#f")
.removeClass('b')
.addClass('i')
.toggle(500);
return false;
})
.b{
display:block;
background:red;
}
.i{
display:inline-block;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f' >block2 flexible</div>
<div class="i">block3 inline</div>
<br>
show as block<br>
show as inline<br>
hide<br>
I think it is impossible.
But there is a way to bypass this bug.
Just wrap the content of the div into another div and toggle the content wrapper, while your original div will stay visible because on the visible div you can change the display option.
here is the jsfiddle
$(".toggle_b").bind("click", function(){
$("#w").hide();
$("#f")
.removeClass('i')
.addClass('b')
$("#w").toggle(500);
})
$(".toggle_i").bind("click", function(){
$("#w").hide();
$("#f")
.removeClass('b')
.addClass('i');
$("#w").toggle(500);
})
.b{
display:block;
background:red;
}
.i{
display:inline-block;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f'> <div id='w' > block2 flexible</div> </div>
<div class="i">block3 inline</div>
<br>
show as block<br>
show as inline<br>
The alternative way I found would be changing not "display", but another CSS property to achieve similar effect, use "float: left;".
BUT floated elements can't have vertical-alignment inside them.
With no parameters, $("#f").hide(); will hide the element immediately with no animation. If you want to animate it, add a duration parameter, e.g.
$(".toggle_h").bind("click", function(){
$("#f").hide(500);
})
The display property cannot be transitioned. Using jQuery's show and hide methods are essentially the same as just saying display: block and display: none in CSS, which, as I just mentioned, can't be transitioned. However, a property like opacity or width CAN be transitioned with CSS. You'd want to toggle a class instead of using .show and .hide though, and let CSS do the transitioning.
If you're looking to simply fade in and out using jQuery, you could replace your .hide method with .fadeOut.
Note: I hope this is what you were referring to :)
I want to use the function called bounce and animate in the JqueryUI library and I'm facing 3 problems:
1) I use the following code to apply the bounce effect:
$('#element').toggle( 'bounce', { times: 3 }, "slow" );
But this hides the element after the finish of bouncing. How to avoid this behavior??
2) I have centered the element using margin-left: auto;margin-right: auto; but during bouncing the element is positioned to the left and ignores the margin auto.
3) I use the function animate to fade in background-color to an element using this code:
$('#element').animate({backgroundColor: '#FFFF99'}, 'slow');
For some reason this applies the animation effect till the first child div and not the whole box. For example:
<div id="element">
<p>this paragraph will get animated but the child div will not</p>
<form>
<div id="child"></div>
</form>
</div>
This is a fiddle to explain the problem:
http://jsfiddle.net/E5XvT/1/
Thanks
from jQuery docs:
.toggle(): Display or hide the matched elements.
what you want is this :
$('#element').effect( 'bounce', { times: 3 }, "slow" );
Fiddle
You are explicitly setting a background color on your #child
background-color: white;
remove that line and it will work.
Looks like rusln answered #1...
To answer #2 use:
<div id="element" align="center">...
To answer #3 use (in css)
#child {
background-color: inherit;
}
hope this helps
I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.
The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)