jquery - 元素正在使用 div 的 mouseover/out 子元素进行剪辑

Question

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

// 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 内时出现一次，在鼠标不在时消失一次？

score 2 · Accepted Answer

代替“mouseover”事件，使用“mouseenter”。

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

解释：每个元素及其子元素都会触发“mouseover”和“mouseout”，所以如果你“mouseout”文本，你的“mouseout”事件就会被触发......

score 1 · Accepted Answer

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

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

2 回答 2