2

这可能很容易，但我暂时无法弄清楚。

我有这样的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 时才隐藏。我该如何做到这一点？

4

2 回答 2

4

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

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

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

演示：小提琴

于 2013-11-06T11:18:15.920 回答
0

如果你想学习 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>
于 2013-11-06T11:49:52.187 回答