html - 悬停子元素时更改父元素的背景

Question

所以我有以下菜单。

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
    </li>
    <li><a href="#">More info</a></li>
    <li><a href="#">Contact</a></li>
</ul>

在第一次的链接上，我有不同的悬停背景。当我悬停“服务”时，会弹出第二个，当我想悬停第二个中的项目时，我希望第一个中的链接保持活动状态。

就像当我悬停服务 > 波兰语时，我希望我的服务背景保持悬停状态。仅在css中可能吗？

Answer 1

好的，我从头开始制作这个东西，你可以检查一下

演示

演示 2（background在父母身上）

.menu > li {
    display: inline-block;
    position: relative;
}

.menu > li > ul {
    display: inline-block;
    position: absolute;
    display: none;
}

.menu > li:hover > ul {
    display: block;
}

.menu > li:hover a {
    color: #f00; 
    /* This selector will color all anchors nested inside li, 
       to be specific, please read the note below */
}

这里的关键选择器是这个.menu > li:hover a，我的目标a是嵌套在里面的元素li。

注意：在演示 1 中，我遗漏了>直接后代选择器，请确保使用它来使选择器具体化。所以把它改成 .menu > li:hover a- .menu > li:hover > aNew Demo

Answer 2

在你的css中试试这个..

ul ul:hover + a { color: red; }

演示

Answer 3

像这样的东西？

演示

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
</li>
<li><a href="#">More info</a></li>
<li><a href="#">Contact</a></li>