Question

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

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

Answer 1

要让主要<li>在悬停辅助链接时保留样式，您需要将:hover样式应用于<li>而不是<a>。

<强> JS

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

<强> CSS

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

不要忘记中和辅助#nav-menu li:hover元素上的<li>个样式。您可以使用#nav-menu > li:hover我猜，但浏览器支持不强。

Answer 2

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

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

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

2 个答案: