使用CSS更改父元素

Question

当我有

时

<ul class="menu">
 <li><a href="bla">link</a></li>
</ul>

如何使LI-tag在悬停时更改属性（例如list-style-image）（a：hover）？

Answer 1

您也可以将hover应用于li：

ul.menu li:hover
 {
   list-style-image: url(highlight.gif);
 }

注意（感谢Andy E）：IE6不支持:hover，仅支持IE7中的链接。 （参见兼容性表here）。 IE6和7有一个名为whatever:hover的解决方法。

Answer 2

在现代浏览器上，您可以使用li:hover，但在较旧的浏览器上，您必须使用javascript。

修改顺便提一下，如果你设置：

a {
    display:block;
}

您可以在a上执行所有样式设置，而无需设置li的样式。

Answer 3

您可以直接添加到作为li元素

的子元素的anchor元素中

li a:hover { ..style.. }

或者您可以为锚点添加一个类来执行该操作

li a.HoverClass:hover { ..style.. }

有一个基本示例here