Question

I wish to display some buttons inside a div while hovering it.

Example here

// HTML

<div id="overdiv"> 
<p>Move your mouse several times on this text to see the bug</p> 
<input type="button" value="hello" class="elements"/> 
</div>

// CSS

#overdiv {background:#CCC;border:1px solid #FFF;width:300px;height:150px;}
.elements {display:none;}

// JS

$('#overdiv').mouseover(function(){$('.elements').fadeIn();}).mouseout(function(){$('.elements').fadeOut();});

It works, but while mouse hovers other elements inside the div then my button appears and disappears in loop. (I’ve only tested it with Chrome)

So, how to make the button appear once, while mouse is inside the div, and disappear once, while mouse is out ?

Answer 1

Instead of the “mouseover”-Event, use “mouseenter”.

$('#overdiv').mouseenter(function(){$('.elements').fadeIn();}).mouseleave(function(){$('.elements').fadeOut();});

Explanation: “mouseover” and “mouseout” are triggered for every element and its children, so if you “mouseout” the text, your “mouseout” event is triggered…