我希望在将鼠标悬停在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内时,如何让按钮出现一次,当鼠标移出时,该按钮会消失一次?
答案 0 :(得分:2)
使用“mouseenter”代替“mouseover”-Event。
$('#overdiv').mouseenter(function(){$('.elements').fadeIn();}).mouseleave(function(){$('.elements').fadeOut();});
说明:为每个元素及其子元素触发“mouseover”和“mouseout”,因此如果您“鼠标移除”文本,则会触发“mouseout”事件...
答案 1 :(得分:1)
尝试这种方式解决问题.....
$( '#overdiv')的mouseenter(函数(){$()淡入()”元素。;})。 $( '#overdiv')鼠标离开(函数(){$()淡出()”元素。;});