Question

我的菜单出现了新问题。

我想在鼠标位于子节点时保持父级悬停效果处于活动状态。

我知道我可以使用jQuery吗？但如果可能的话，我真的想把它保存在CSS中。

并且无需为所有元素提供唯一的ID ...

http://forevertan.dk/_temp/eventfest/3/test3.htm

Answer 1

将：hover选择器放在li元素而不是锚

上

#navMain li:hover > a{
    background-color: black;
}

http://jsfiddle.net/293mV/

Answer 2

如果你想只使用CSS，我强烈推荐你，你必须稍微改变你的标记。当您在:hover的父级（a）li上检查a时，当您进入子菜单时，该:hover仍将显示在ul#nav li > a { /* all the normal state styling here */ } ul#nav li:hover > a { /* hover state styling here */ }上。基本上我们这样做：

我们会将li扩展为li的维度。所以a似乎表现得像li。唯一的区别是，a是ul 的父级和子菜单<ul id="nav"> <li> <a href="#test">Test</a> <ul> <li> <a href="#test/sub">Sub</a> </li> </ul> </li> <li> <a href="#test">Test</a> <ul> <li> <a href="#test/sub">Sub</a> </li> </ul> </li> </ul>。

JSFiddle here

HTML保持不变：

ul#nav > li {
    padding: 0;
    margin: 0;

    float: left;
    position: relative;
}
ul#nav li > a {
    height: 30px;
    min-width: 80px;
    padding: 0;
    margin: 0;
    border-right: 1px solid #CCC;
    border-left: 1px solid #CCC;

    display: block;

    background: #000;

    color: #FFF;
    text-align: center;
    line-height: 30px;
    white-space: nowrap;
}
ul#nav li:hover > a {
    background: #FFF;

    color: #000;
}
ul#nav > li ul {
    display: none;
    position: absolute;
}
ul#nav > li:hover ul {
    display: block;
}
ul#nav > li ul li {
    display: block;
}.

CSS更改：

{{1}}

Answer 3

您不能使用CSS影响父项;你需要使用JavaScript。如果您不喜欢ID，可以使用jQuery的相对选择器.parent()，.next()等。

Keep：鼠标悬停在子节点上时，悬停在父节点上

3 个答案: