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，b，c ... f的任何子li上时，它也会改变父母（a）的背景颜色。如何在悬停时只更改当前li元素的bg颜色，也可以在第3级li，那么可能是一般解决方案..

Answer 1

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

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

之前没有工作的原因是因为它定位到顶级li，所以它下面的所有内容都是li的一部分。因此，当子菜单被悬停时，所有块都被突出显示

Fiddle

Answer 2

添加＆gt;进入你的CSS，以便它必须是一个直接的后代。

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

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

在悬停时改变li的颜色

2 个答案: