javascript - mouseOver() 有趣的行为

Question

我很好奇为什么蓝色<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.

Answer 1

原因是因为mouseout事件bubble，也就是说，当你鼠标移出任何一个 child 时，祖先仍然会收到该事件。您可以通过根据当前目标 (this) 检查目标来解决此问题。 Here's an updated jsFiddle.

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