jquery - Mouseleave 不适用于子 div

Question

这可能很简单，但我暂时无法弄清楚。

我有这样的html:

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

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

当前 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 时才隐藏。我如何实现这一点？

Answer 1

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

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

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

演示:Fiddle