CSS悬停事件，如何触发父元素的效果

Question

我有一个下拉菜单<ul/>，当鼠标悬停时会显示第二个列表<ul/>。

因此：

<ul id="NavBar">
    <li><a href="#">News & Press Releases</a>
        <ul class="NavBar_drop">
            <li><a href="#">OCPO Home</a></li>
            <li><a href="#">Press Releases</a></li>
            <li><a href="#">Ocean County Government</a></li>
        </ul>
    </li>
</ul>

当你悬停在"新闻与新闻发布"锚点标记上时，会发生以下效果：

#NavBar > li > a:hover {
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    color: #000;
}

然而，一旦你移动到任何子链接（例如“OCPO首页”），上述悬停效果就会消失。显然，我必须使用另一个CSS标签来强制保持它，但我不知道我做错了什么。这是我的尝试：

.NavBar_drop:hover #NavBar > li > a {
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    color: #000;
}

- Karmaxdw

---

当你移动到子链接时，你已经离开了<a>，因此悬停效果停止了。尝试更改选择器，使其在你悬停在父级<li>上时触发：#NavBar > li: hover { CSS样式在这里... } - Dre

做到了！谢谢。我以为它会通过锚点标签而不是列表项，但现在这很有道理。 - Karmaxdw

不用谢；我会将这个作为答案，以便可以关闭。 - Dre

Answer 1

从技术上讲，您无法在父元素上触发效果。但是，鉴于您所述的问题，实际上不需要这样做。当您移动到子链接时，您正在离开 <a>；因此悬停效果会停止。更改选择器，使其在您悬停在父级 <li> 上时触发：

#NavBar > li:hover { 
    /* CSS Styles here... */
}

- Dre

Answer 2

除了Dre的回答之外，如果你只想在整个<li>上方突出显示你的<a>，请尝试使用这个css规则:

#NavBar > li:hover > a {

请查看工作演示

- Nelson

Answer 3

在层叠样式表中，您无法选择父元素，因此您正在尝试的操作是不可能的。

- PHPSrike

---

我处理的方式可能有问题，但这绝对不是不可能的。 - Karmaxdw