CSS悬停菜单：如何使悬停的菜单项保持悬停状态CSS

Question

在这种情况下，我如何设置鼠标悬停状态在浏览菜单项时保持不变？有没有纯CSS的方法，还是我需要引入一些JavaScript？谢谢。

- Drew H

---

你的意思是如果你完全将鼠标移出菜单，你希望高亮显示的项目仍然保持高亮吗？ - James Montagne

是的，那是正确的。我认为用CSS不可能实现。不过也不确定。 - Drew H

@DrewH -- 可以使用纯CSS实现。请看我的回答。 - Naftali

Answer 1

仅使用css就可以实现。

例如： 如果您的菜单是由嵌套列表构成：

li:hover {
    background: #color;
}

li:hover ul {
    display: block;
}

li:hover ul li {}

Fiddle: http://jsfiddle.net/maniator/ZC4xv/

上面示例的CSS：

#nav-menu > li {
    background: orange;
    float: left;
    padding: 10px;
    border: 1px solid grey;
}

#nav-menu > li:hover a {
    background: red;
    padding: 2px;
    display: inline;
}

#nav-menu > li ul {
    display: none;
    position: absolute;
}

#nav-menu > li:hover ul {
    display: block;
    margin-left: 5px;
}

#nav-menu > li:hover ul li {
    background: blue;
}

#nav-menu > li:hover ul li:hover {
    background: green;
}

- Naftali

Answer 2

假设子菜单是一个嵌套列表，您可以使用jQuery向父菜单项添加悬停类：

<ul class="primary-nav">  
    <li>Menu Item 1
        <ul class="sub-nav">
            <li>Sub-Menu Item 1</li>
            <li>Sub-Menu Item 2</li>
        </ul>
    </li>
    <li>Menu Item 2</li>
</ul>

<script>
    $('.primary-nav li').hover(function(){
        $(this).addClass('hover');
    }, function(){
        $(this).removeClass('hover');
    });
</script>  

- JeffreyPia

Answer 3

尝试将顶级项目放在 span 标签内。假设：

<li>
    <a><span>Setting</span></a>
    <ul>
    ...
    </ul>
</li>

那么这是关于CSS的：

li:hover span {
    background: #color;
    display: block;
}

li:hover ul {
    display: block;
}

- lnguyen55