元素是使用mouse的mouseover / out子元素剪辑

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”代替“mouseover”-Event。

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

说明：为每个元素及其子元素触发“mouseover”和“mouseout”，因此如果您“鼠标移除”文本，则会触发“mouseout”事件...

Answer 2

尝试这种方式解决问题.....

$（ '＃overdiv'）的mouseenter（函数（）{$（）淡入（）”元素。;}）。 $（ '＃overdiv'）鼠标离开（函数（）{$（）淡出（）”元素。;}）;