javascript - mouseOver()有趣的行为

我很好奇为什么当我将鼠标从标题上移开时蓝色的<div>消失了，而不是当鼠标离开整个<div>时才消失了。

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


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

Here's a demo jsFiddle.

最佳答案

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

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