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

时间:2012-08-08 12:50:22

标签: jquery mouseover mouseout

我希望在将鼠标悬停在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内时,如何让按钮出现一次,当鼠标移出时,该按钮会消失一次?

2 个答案:

答案 0 :(得分:2)

使用“mouseenter”代替“mouseover”-Event。

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

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

答案 1 :(得分:1)

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

$( '#overdiv')的mouseenter(函数(){$()淡入()”元素。;})。 $( '#overdiv')鼠标离开(函数(){$()淡出()”元素。;});