css - 悬停时改变li的颜色

Question

我想在悬停时更改 li 元素的颜色，

<ul id="sitemap">
        <li><a href="#">a</a>
            <ul>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
                <li><a href="#">d</a></li>
                <li><a href="#">e</a></li>
                <li><a href="#">f</a></li>
            </ul>                   
        </li>
</ul>

这是CSS代码：

 #sitemap li:hover{
    background:#eee;
} 

当我将鼠标悬停在 a 的任何子 li 即 b,c.. f 上时，它也会改变 parent(a) 的背景颜色。如何在悬停时仅更改当前 li 元素的 bg-color，在第 3 级也可以有 li 所以一般的解决方案是什么..

Answer 1

只需添加ul到您的选择器，就可以了

#sitemap ul li a:hover {
  background:#eee;
}

之前不工作的原因是因为它是针对顶层的li，所以它下面的一切都是除此之外的li。因此，当子菜单悬停时，所有块都被突出显示

小提琴

Answer 2

将 > 添加到您的 css 中，使其必须是直接后代。

#sitemap ul > li > a:hover {
  background:#eee;
}

有关更多信息，请查看http://www.w3.org/TR/CSS2/selector.html#child-selectors