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>

当您将鼠标悬停在"News & Press Releases“锚点标签上时，会出现以下效果：

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

Answer 1

从技术上讲，您不能在父元素上触发效果。然而，考虑到您所陈述的问题，您实际上并不需要这样做。当您移动到子链接时，您将离开<a>；因此悬停效果将停止。更改选择器，以便在将鼠标悬停在父<li>上时触发选择器：

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

Answer 2

对于Dre的回答，如果你只想在整个<li>上突出显示你的<a>，可以尝试使用下面的规则：

#NavBar > li:hover > a {

请参阅

Answer 3

您不能在级联样式表中选择父元素，因此您尝试的内容是不可能的