CSS 悬停事件，如何触发父级的效果答案

【问题标题】：CSS Hover Events, How to Trigger a Parent's EffectCSS 悬停事件，如何触发父级的效果
【发布时间】：2013-05-27 16:15:08
【问题描述】：

我有一个下拉菜单 <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;
}

【问题讨论】：

当您移动到子链接时，您将关闭<a>;因此悬停效果停止。尝试更改选择器，以便在您将鼠标悬停在父 <li> 上时触发它：#NavBar > li: hover { CSS Styles here... }
行了！谢谢你。我认为它会通过锚标记，而不是列表项，但现在这是有道理的。
不客气；我将把它作为一个答案，以便它可以关闭。

标签： html css events hover anchor

【解决方案1】：

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

#NavBar > li:hover > a {

见working demo

【讨论】：

【解决方案2】：

从技术上讲，您不能触发对父元素的影响。但是，鉴于您所说的问题，您实际上并不需要这样做。当您移动到子链接时，您将关闭<a>；因此悬停效果停止。更改选择器，以便在您将鼠标悬停在父级 <li> 上时触发它：

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

【讨论】：

【解决方案3】：

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

【讨论】：

我的方法可能有问题，但肯定不是不可能的。