Question

这可能很容易，但我暂时无法理解。

我有这样的HTML：

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

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

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

$(".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

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

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

演示：Fiddle

Answer 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>

Mouseleave不适合儿童div

2 个答案: