0

抱歉，标题看起来不错，我不知道如何为我的问题写标题。

所以我有一个带有一些菜单项和子菜单项的菜单栏：

<div id="mainmenu">
<ul id="menu">
    <li><a class="current" href="">Menu1</a></li>
    <li><a href="#">Menu2</a>
        <ul>
            <li><a href="">Submenu1</a></li>
            <li><a href="">Submenu2</a></li>
        </ul>
    </li>
    <li><a href="">Menu3</a></li>
    <li><a href="">Menu4</a></li>
</ul>
</div>

这是我到目前为止所做的事情。

我想要的是保持菜单项在其子菜单项悬停时也处于:hover状态，例如 If my mouse is on or the should also be darkened。我怎样才能用 CSS 做到这一点？submenusubmenu2Menu2

我希望我的问题很清楚。

编辑：

Wooo 非常感谢大家。

得到它：#menu li:hover

#menu li:hover,#menu a:hover,#menu > li a.current{

} ​
4

6 回答 6

2

在 CSS 的最后一行，添加#menu li:hover到目标选择器

此处更新示例：http: //jsfiddle.net/7UaNn/

于 2012-07-12T09:56:02.520 回答
1

#menu li:hover > a在下面的css中添加这个

#menu a:hover, #menu > li a.current {
  // your Style
}

所以它应该是这样的：

 #menu a:hover, #menu > li a.current, #menu li:hover > a {
  // your Style
}

见演示：http: //jsfiddle.net/akhurshid/bk2HA/7/

于 2012-07-12T10:00:24.263 回答
1

您可以通过连接到:hover父li元素的状态而不是锚元素来实现这一点 - 这是实际悬停的列表项的子元素 - 如下所示：

li a:hover,
li:hover > a {
    color: #fff;
}

您可能需要使用:nth-child()来绕过处于悬停状态的每个子​​链接。没有测试这个。

/edit：更新了选择器，现在使用 > a 只选择悬停列表元素的直接子锚元素，不需要 :nth-child 等。

于 2012-07-12T09:56:44.113 回答
1

目前，列表项的所有悬停样式都应用于a- 元素。

但是，您需要将它们应用到li-Element 以保持悬停状态处于活动状态。

有时这可能会变得棘手，但在您的情况下这很容易，只需添加：

#menu > li:hover{
 background:#474747;   
}

到你的风格。

查看您修改后的小提琴

于 2012-07-12T09:57:07.717 回答
1

除了 "a" 还为 "li" 添加悬停：

#menu > li:hover{
background:#474747;   
}
于 2012-07-12T10:05:01.397 回答
0

使悬停时更改的内容成为 LI 的背景，而不是“a”的背景。

ul#menu li:hover { background:#000; }
于 2012-07-12T09:55:33.060 回答