更改<a> contained within <li>, but on hover over </li><li></li></a>的字体颜色

Question

我的<li>包含<a href>

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

我想更改每个<li>项目的背景颜色和文字颜色。我发现通过定位li:hover而不是a:hover可以更好地更改背景颜色，因为a:hover仅更改了线条的一小部分（具有{的部分的背景） {1}}文字）。

<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 悬停时，有没有办法让css更改所包含的<a href>的字体颜色？再次，这就是html标记的样子：

<li>

Answer 1

li:hover a { color: red }

:hover文档。

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

Answer 2

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

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