mouseover、jQueryを使用しているときに親要素とすべての子要素を選択します

Question

要素内に（h3、img、p）を持つdivがあります。 jQueryを使用して、ユーザーがこのdivの上を移動してこのdivの要素のクラスを切り替えるときを検出したいとします。

私は以下のコードを使用しています：

$('.entry').bind({ 
    mouseover: function() { 
    $('.readMore').toggleClass('inverted'); 
    }, 
    mouseleave: function() { 
    $('.readMore').toggleClass('inverted'); 
    } 
}); 

期待通りにだけdiv上にマウスを移動すると、この作品。 div内の要素（たとえば.entry h2）の上にマウスを置くと、親div（.entry）を残しているようにクラスがトグルしますが、実際は内部にあります。要素は私がそれを捨てるかもしれないと思っていたdiv.entryの中に浮かんでいません。私は$(".entry *")と$(".entry, .entry *")を試しましたが、どちらも同様の問題があります。

どのような考えですか？

Answer 1

mouseenterとmouseleaveを代わりに使用してください。

MouseEnterイベントは、それがバブリング イベントを処理する方法にマウスオーバーとは異なります

は、ここでのドキュメントの関連作品mouseover対についてmouseenterです。この例でマウスオーバーが使用された場合、 マウスポインタがInner要素の上を移動したとき、ハンドラは がトリガされます。これは通常望ましくない動作です。一方、mouseenterイベント は、マウスが子孫ではなくバインドされた 要素に入ると、そのハンドラをトリガします。

Here's an exampleポインタを要素の内外に移動すると、どのイベントが発生するのか注意してください。