如何定位多級無序列表中的頂級鏈接？

我有風格作爲一個無序列表看起來像這樣一個多層次的導航：如何定位多級無序列表中的頂級鏈接？

<ul id="nav-menu"> 
    ... 
    <li id="menu-item-1"> 
    <a href="#">Category</a> 
    <ul class="sub-menu"> 
     <li id="menu-item-2"> 
     <a href="#">Sub-Category</a> 
     </li> 
    </ul> 
    </li> 
    ... 
</ul>

頂層的樣式，這樣徘徊時，有一個背景。我的問題是，當光標移動到子菜單時，此背景消失。我試圖用jquery在其子菜單懸停時向頂級錨點添加一個類。有什麼建議麼？

樣品相關的CSS：

#menu-nav li a { /* no background-set */ } 
#menu-nav li a:hover { background: #fff; } 
.sub-menu li a { background: #ccc; } 
.sub-menu li a:hover { background: #999; }

來源

2011-04-03 Tyler Rash

任何樣式表的例子都不錯。（通常，如果孩子徘徊，父母也被認爲'徘徊'） – 2011-04-03 03:17:23

@Nikita，增加了相關的CSS; @K在未回答的問題上接受了最佳答案，儘管他們並未真正解決我的問題。 – 2011-04-03 03:37:15

對於主<li>到在懸停輔助鏈接時保留樣式，您需要將:hover樣式應用於<li>而不是其中的<a>。

$("#nav-menu > li").hover(
    function(){ $(this).addClass("hover"); }, 
    function(){ $(this).removeClass("hover"); } 
)

CSS

#nav-menu li:hover, #nav-menu li.hover {/* styles here */}

不要忘了中和次級<li>元素#nav-menu li:hover風格。我猜你可以使用#nav-menu > li:hover，但瀏覽器支持並不強。

來源

2011-04-03 03:46:59 Marcel

比我想象的還要簡單。謝謝，冠軍。 – 2011-04-03 03:51:13

考慮更正您的jQuery語法。 – daryl 2011-04-03 08:10:06

@tfbox：感謝隊友，完成。 – Marcel 2011-04-03 08:35:21

@Tyler，嘗試使用了mouseenter，鼠標離開，而不是鼠標懸停及移出時，這將解決您的問題

http://api.jquery.com/mouseenter/

來源

2011-04-03 03:22:52 kobe

我的問題不在於jquery事件，而是實際遍歷列表。 – 2011-04-03 03:39:54

如何定位多級無序列表中的頂級鏈接？

回答

相關問題