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に任せない場合にのみ、を非表示にしたい。<div class="boxes">どうすればそれを達成できますか？

4

2 に答える 2

4

mouseoutの代わりにmouseleaveイベントを使用する必要があります

mouseleave イベントは、イベント バブリングを処理する方法が mouseout とは異なります。この例で mouseout が使用された場合、マウス ポインターが内部要素の外に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。一方、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 に答える