jQuery slideUp没有正确执行

Question

我有一个div元素container，其中包含另一个包含更多input type button元素的div。当我mouseout第二个div元素时，我希望它隐藏自己，但是当我将鼠标从一个按钮移动到另一个按钮时会发生这种情况。

HTML：

<div id="container">
<div id="settings">
<input type="button" value="Logout" />
<input type="button" value="Staff Area" />
</div>
</div>

jQuery的：

$(document).ready(function(){
$("#settings").mouseout(function(){
    $(this).slideUp();
    });
});

jsfiddle链接：http://jsfiddle.net/cm4hE/

Answer 1

Working Fiddle

的jQuery

$(document).ready(function () {
    $("#settings").mouseleave(function () {
        $(this).slideUp();
    });
});  

使用 mouseleave() 可以解决您的问题。这里显示了一个不错的 Different between mouseout() and mouseleave() ......

希望它有所帮助...... !!

Answer 2

我认为您应该使用mouseleave代替mouseout。这是因为如果鼠标指针留下任何子元素以及所选元素，则会触发mouseout事件。有关详细信息，请参阅这些页面。

所以上面的例子变成了：

$(document).ready(function(){
$("#settings").mouseleave(function(){
    $(this).slideUp();
    });
});

Answer 3

您可以使用hover代替mouseout

$(function(){    
    $("#settings").hover(function () {
    }, function () {
        $(this).slideUp();
    });
});

编辑完整性