jQuery - サブ要素の.hover（）が発生する

Question

<ul>から<li>をターゲットにして、それらにホバーイベントを与えようとしています。

<li>は、<li>の外側に位置する他のいくつかの<div>を含んでいます。

問題は、デザイン/幾何学的にdiffent要素のように見えるにもかかわらず、子がDOMwiseのため、子にカーソルを置くと発生します。

カーソルは、<li>の上にカーソルを置いたときに使用できますが、それ以外のイベントはありません。サブエレメントはありませんか？

ありがとうございます。

Answer 1

これはスタイルを変更するためのものですか？ そう例えば、代わりにjQueryのCSSの疑似イベントを使用してみた場合：

li:hover 
{ 
    background-color:yellow; 
} 

を別の方法として、e.stopPropagationを（）、使用例：

$(document).ready(function(){ 
    $(".parent").click(function(){ 
     // do whatever; 
    }); 
    $(".child").click(function(e) { 
     e.stopPropagation(); 
    }); 
}); 

残念ながら、私は、これはホバーで動作するとは思いません、マウスオーバーとマウスアウトでは、ホバーが基本的に使用するものです。

Answer 2

あなたはこれを達成するために、イベントの発信元を決定するためにevent.targetプロパティを使用することができます。

$('li').hover(function (event) { 
    if ($(this).is(event.target)) { 
    // Your code here 
    } 
}); 

DOM要素は、任意のサイズと泡立ちの振る舞いがある持って必ずしも必要がないので、このための標準的なものは、ありません私の知る限り一般に望ましい。