CSS 更改 <li> 中包含的 <a> 的字体颜色，但将鼠标悬停在 <li> 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1988122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing font color of <a> contained within <li>, but on hover over <li>
提问by drake
I have a <li>that contains an <a href>
我有一个<li>包含<a href>
<li><a href="http://site.com">Page</a></li>
I'd like to change the background color and text color of each <li>item as it's hovered over. I found that the background color is best changed by targetting the li:hoverand not the a:hoverbecause the a:hoverchanges the background of only a small portion of the line (the part that has the <a>text).
我想更改<li>悬停在每个项目上的背景颜色和文本颜色。我发现最好通过定位 theli:hover而不是 the 来更改背景颜色，a:hover因为a:hover它只更改了行的一小部分（包含<a>文本的部分）的背景。
li:hover { background-color:green; }
What I'd also like to do is change the font color (that's the <a>). When I do it the first way below, it has no effect on the <a>text color. And when I do it the second way below, I'd have to hover specifically on the <a>for the font color to change, not just anywhere in the <li>bullet line.
我还想做的是更改字体颜色（即<a>）。当我按照下面的第一种方式进行操作时，它对<a>文本颜色没有影响。当我按照下面的第二种方式进行操作时，我必须专门将鼠标悬停在<a>要更改的字体颜色上，而不仅仅是在<li>项目符号行中的任何位置。
li:hover { background-color:green; color:red; } //first way
a:hover { color:red; } //second way
Is there a way with css to change the font color of the contained <a href>when the <li>is hovered over? again, this is what the html markup looks like:
<a href>当<li>鼠标悬停在css 上时，有没有办法用 css 更改所包含的字体颜色？同样，这就是 html 标记的样子：
<li><a href="http://site.com">Page</a></li>
采纳答案by bobince
The way that works on IE6 is to still target the link, but make the link fill the whole of the space inside the <li>:
在 IE6 上的工作方式是仍然以链接为目标，但让链接填充 内的整个空间<li>：
li a { display: block; }
li a:hover { background-color: green; }
回答by Nick Presta
li:hover a { color: red }
:hoverdocumentation.
:hover文档。
IE5/6 only support :hover on links, so make sure you're not testing on those browsers.
IE5/6 仅支持 :hover on links，因此请确保您没有在这些浏览器上进行测试。
