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 它也会更改父 (a) 的背景颜色。如何在悬停时仅更改当前 li 元素的 bg-color，第 3 级也可以有 li，所以一般的解决方案是什么..

Answer 1

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

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

它之前不工作的原因是因为它针对的是顶级 li，所以它下面的所有内容都是 li 的一部分。因此，当子菜单悬停时，所有 block 都会突出显示

Fiddle