「li」鼠標懸停事件被兒童'a'元素顯示塊阻止

我正在嘗試在其父母<li>的mouseover事件中顯示子導航<ul>標記。問題是a元素被設置爲display:block，所以li的事件永遠不會被觸發。「li」鼠標懸停事件被兒童'a'元素顯示塊阻止

它使用jQuery，但我不能讓它與純JavaScript工作。我申請聽者頭部元素，並使用.matchesSelector方法來確定事件是否匹配目標.nav > li;

2012-04-07 Kyle Hyde

代碼是勝過千言萬語。 – 2012-04-07 07:41:37

如果沒有代碼，就必須猜測，但我的猜測是，你正在使用mouseover和確定懸停的mouseout。 mouseout事件氣泡，因此您將從li的後代元素中收到mouseout，並且錯誤地（我在這裏再次猜測）認爲光標已經離開li，而不是它留下了其中一個後代元素li。同樣，當光標從li本身移到後代元素時，li會觸發mouseout。它工作在jQuery（使用hover，大概是？），因爲jQuery不使用mouseover和mouseout，它使用mouseenter和mouseleave，這更適合這種情況。（它在沒有原生瀏覽器的情況下模擬它們;它們最初只有IE瀏覽器）。

因此，如果您使用jQuery，顯然只需使用hover。如果您不是，並且您要麼沒有使用庫，要麼使用的庫不是爲您模擬mouseenter和mouseleave，您需要檢查mouseout操作來自哪個元素，並忽略它，除非它是li本身。

如果子導航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及更高版本（如果您處於標準模式）。

來源

2012-04-07 07:43:59

爲什麼不定義所有的子元素的事件處理程序，然後做一個

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

來源

2012-04-07 07:45:07 alexg

不起作用。當光標從「li」移動到它的子元素時，'li' *本身*會觸發'mouseout'。使用'mouseover'和'mouseout'跟蹤懸停比從後代取消事件複雜得多。 – 2012-04-07 07:58:12

「li」鼠標懸停事件被兒童'a'元素顯示塊阻止

回答

相關問題