更改< a>的字体颜色包含在< li>中，但悬停在< li> [英] Changing font color of <a> contained within <li>, but on hover over <li>

问题描述

我有一个包含< a href>

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

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

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:hover and not the a:hover because the a:hover changes the background of only a small portion of the line (the part that has the <a> text).

li:hover { background-color:green; }

我还想做的是更改字体颜色c>< a> ）。当我在下面的第一个方法，它对< a> 文本颜色没有影响。当我在下面的第二个方法做，我必须专门悬停在< a> 为字体颜色更改，而不只是在<$

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.

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

有一种方法可以改变css的字体颜色当< li> 被悬停时，是否包含< a href> 再次，这是html标记的样子：

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:

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

推荐答案

链接，但使链接填充< li> 内的整个空间：

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>:

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

这篇关于更改&lt; a&gt;的字体颜色包含在&lt; li&gt;中，但悬停在&lt; li&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！