更改<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

有没有办法让css <a href>在<li>悬停时改变包含的字体颜色？再次,这是html标记的样子:

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

Answer 1

li:hover a { color: red }

:悬停文档.

IE5/6仅支持:将鼠标悬停在链接上,因此请确保您没有在这些浏览器上进行测试.

Answer 2

在IE6上运行的方式是仍然以链接为目标,但使链接填充以下内部的整个空间<li>:

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