悬停时改变li的颜色答案

【问题标题】：change color of li on hover悬停时改变li的颜色
【发布时间】：2013-07-28 02:44:13
【问题描述】：

我想在悬停时改变 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，所以一般解决方案可能是什么..

【问题讨论】：

标签： css menu hover

【解决方案1】：

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

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

它之前不起作用的原因是因为它针对的是顶级li，所以它下面的所有东西都是li的一部分。因此，当子菜单悬停时，所有块都被突出显示

Fiddle

【讨论】：

您错过了关于第三级也可以有li 的部分，那么一般解决方案可能是什么..
@rink.attendant.6 是的，我确实错过了那部分。更新的答案可以解决问题

【解决方案2】：

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

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

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

【讨论】：