mouseOver（）有趣的行为

Question

我非常好奇为什么当我将鼠标从标题上移开时蓝色<div>消失了，而不是当鼠标离开整个 {{1 }}

<div>

Here's a demo jsFiddle.

Answer 1

原因是因为mouseout事件冒泡，也就是说，当您将鼠标移出任何一个孩子时，祖先仍然会收到该事件。您可以通过针对当前目标（this）检查目标来解决此问题。 Here's an updated jsFiddle.

$("#yw1").mouseout(function(e) {
    if(e.target === this) {
        $("#yw1 .portlet-content").slideUp('fast');
    }
});

Answer 2

使用jQuery的mouseleave而不是mouseout。

Answer 3

原因是mouseout事件被冒泡并且隐藏了。使用mouseneter和mouseleave事件来解决此问题。

$("#yw1 .portlet-title").mouseenter(function(){
    $("#yw1 .portlet-content").slideDown('fast');
});


$("#yw1").mouseleave(function(){
    $("#yw1 .portlet-content").slideUp('fast');
});

<强> Demo