元素正在用鼠標懸停在剪輯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（）;}）;