子 'a'要素の表示ブロックによって 'li' mouseoverイベントが防止されています

Question

親サブタイトル<ul>タグを親の<li>のmouseoverイベントに表示しようとしています。問題は、a要素がdisplay:blockに設定されているため、liのhoverイベントが発生しないことです。

jQueryを使用して動作しますが、プレーンなJavaScriptで動作させることはできません。私は、ヘッダ要素にリスナーを適用すると、イベントターゲットは、コードなしで.nav > li;

Answer 1

と一致するかどうかを判断するために.matchesSelectorメソッドを使用しています、一つは推測にありますが、私の推測では、あなたがmouseoverを使用していることで、ホバーリングを決定するためにmouseout。 mouseoutイベント泡がであるため、liの子孫要素からmouseoutを受け取ります。間違って（ここでも推測しています）、カーソルがliの子孫要素の1つを残したままではなくなったと思います。 li。同様に、カーソルがliから子孫要素に移動すると、liはmouseoutをトリガーします。これは、jQueryがmouseoverとmouseoutを使用しないため、mouseenterとmouseleaveを使用しているため、jQueryで動作します（hover、おそらく？を使用しています）。 （ネイティブではないブラウザー上でエミュレートしますが、元々はIEのみでした）

jQueryを使用している場合は、明らかにhoverを使用してください。あなたがライブラリを使用していないか、mouseenterとmouseleaveをエミュレートしていないライブラリを使用している場合は、でない限り、mouseoutのどの要素が動作しているかをチェックして無視する必要があります。

サブナビゲーションulがそれを明らかにするliをカバーしていない場合は、CSSのみの解決策が考えられます。 （あなたは位置決めのために、これ以上のものをしたいと思いますが、これは表示/非表示の部分を行います）

<ul class="mainnav"><!-- Main nav --> 
    <li><!-- Nav item 1 --> 
    Nav Text 1 
    <ul><!-- Menu for nav item 1 --> 
    ... 
    </ul> 
    </li> 
    <li><!-- Nav item 2 --> 
    Nav Text 2 
    <ul><!-- Menu for nav item 2 --> 
    ... 
    </ul> 
    </li> 
</ul> 

このCSSはそれを行います：例えば、構造と

ul.mainnav > li > ul { 
    display: none; 
} 
ul.mainnav > li:hover > ul { 
    display: none; 
} 

ことIE6では動作しません。それはIE7以上で動作します（標準モードの場合）。

Answer 2

なぜ、すべての子要素のイベントハンドラを定義していないし、その後

event.cancelBubble = true; //IE 
event.stopPropagation(); //FF, etc