如何定位多级无序列表中的顶级链接？答案

【问题标题】：How to target a top-level link in a multi-level unordered list?如何定位多级无序列表中的顶级链接？
【发布时间】：2011-04-03 16:34:28
【问题描述】：

我有一个多级导航，样式为无序列表，如下所示：

<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; }

【问题讨论】：

任何样式表的例子都很好。（通常，如果孩子悬停，父母也被认为是“悬停”）
@Nikita，添加了相关的 CSS； @K 接受了我未回答的问题的最佳答案，即使它们实际上并没有解决我的问题。

标签： jquery html css

【解决方案1】：

要使主要<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，但浏览器支持不是那么强。

【讨论】：

比我想象的还要简单。谢谢，冠军。

【解决方案2】：

@Tyler ，尝试使用 Mouseenter ， Mouseleave 代替 mouseover 和 mouseout ，这将解决您的问题

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

【讨论】：

我的问题不在于 jquery 事件，而在于实际遍历列表。