元素正在用鼠标悬停在剪辑div的元素

Question

我希望在悬停时在div内显示一些按钮。

例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();}); 

它的工作原理，但在鼠标悬停在其它元件边div，然后我的按钮出现并消失在循环中。 （我只用Chrome测试过）

那么，如何让按钮出现一次，而鼠标是在div内，并且一旦消失，而鼠标不在使用？

Answer 1

而不是“鼠标悬停”事件，使用“mouseenter”。

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

解释：“鼠标悬停”和“鼠标移开”被触发的每一个元素和它的孩子，所以，如果你“鼠标移出”一文，触发你的“鼠标移出”事件......

Answer 2

试试这个解决问题的方法.....

$（'＃overdiv'）。mouseenter（function（）{$（'。elements'）。fadeIn（）;}）; $（'＃overdiv'）。mouseleave（function（）{$（'。elements'）。fadeOut（）;}）;