更改 <li> 中包含的 <a> 的字体颜色，但将鼠标悬停在 <li> 上

Question

我有一个<li>，其中包含一个<a href>

<li><a href="http://site.com">Page</a></li>

我想更改悬停在每个 <li> 项目上的背景颜色和文本颜色。我发现最好通过定位li:hover 而不是a:hover 来改变背景颜色，因为a:hover 只改变了行的一小部分（具有<a> 文本的部分）的背景。

li:hover { background-color:green; }

我还想做的是更改字体颜色（即<a>）。当我按照下面的第一种方式进行操作时，它对 <a> 文本颜色没有影响。当我按照下面的第二种方式执行此操作时，我必须将鼠标悬停在 <a> 上才能更改字体颜色，而不仅仅是 <li> 项目符号行中的任何位置。

li:hover { background-color:green; color:red; } //first way
a:hover { color:red; } //second way

当<li> 悬停在上面时，css 是否可以更改包含的<a href> 的字体颜色？同样，这就是 html 标记的样子：

<li><a href="http://site.com">Page</a></li>

Answer 1

在 IE6 上的工作方式仍然是指向链接，但让链接填满 <li> 内的整个空间：

li a { display: block; }
li a:hover { background-color: green; }

Answer 2

li:hover a { color: red }

:hover 文档。

IE5/6 only support :hover on links，所以请确保您没有在这些浏览器上进行测试。