Mouseleave 不适用于子 div答案

【问题标题】：Mouseleave not for child divsMouseleave 不适用于子 div
【发布时间】：2013-11-06 11:16:55
【问题描述】：

这可能很容易，但我暂时想不通。

我有这样的html：

<div class="current-colors">
    <div class="boxes">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

<div class="boxes"> 显示为块。

当前的 jQuery - 当用户从带有类框的 div 容器中移动时：

$(".current-colors").on('mouseout', '.boxes', function(){
    $(".filter-menu .current-colors .boxes").hide();
});

<div class="boxes"> 是隐藏的，这是正确的。

但我的问题是，当用户移动到 <div class="item"> 时，<div class="boxes"> 也被隐藏了。我不想要那个。 我希望 <div class="boxes"> 仅在离开“外面”而不留给任何子 div 时隐藏。我该如何实现？

【问题讨论】：

标签： jquery html onmouseout

【解决方案1】：

您需要使用mouseleave 事件而不是mouseout

mouseleave 事件与 mouseout 处理事件的方式不同冒泡。如果在这个例子中使用了 mouseout，那么当鼠标指针移出内部元素，处理程序将是触发。这通常是不受欢迎的行为。 mouseleave 事件，另一方面，仅在鼠标离开时触发其处理程序它绑定到的元素，而不是后代。所以在这个例子中，当鼠标离开外部元素时触发处理程序，但不是内部元素。

$(".current-colors").on('mouseleave', '.boxes', function(){
    $(this).hide();
    //$(".filter-menu .current-colors .boxes").hide();
});

演示：Fiddle

【讨论】：

【解决方案2】：

如果你想学习 jquery not() 事件，看这个小提琴：http://jsfiddle.net/mehmetakifalp/YXTAz/

$("#list li").not(".one").css("border-bottom","1px solid #000");

<ul id="list">
 <li class="one">Item A</li>
 <li class="two">Item B</li>
 <li class="three">Item C</li>
</ul>

【讨论】：