Question

我希望在<li>元素悬停时更改链接的文本颜色。现在我有

#nav li a:hover {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

#nav ul li:hover {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

但是，这只会在链接本身悬停时更改文本颜色。如果鼠标位于链接的右侧，则背景会更改，但文本不会。我喜欢它，以便链接右侧的鼠标在功能上与链接本身相同。有没有办法在背景时改变文本颜色？

Answer 1

然后确保a从其父级继承其颜色：

li:hover a {
    color: inherit;
}

或者指定一个选择器以明确地将相同的颜色应用于a元素：

#nav ul li:hover,
#nav ul li:hover a {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

当然，您也可以a填充li元素，使用：

#nav ul li a {
    display: block;
}

如果您指定li的高度，则使用相同的高度（使用之前的display: block规则），a将在li内垂直居中同样，例如：

#nav ul li {
    height: 2em; /* or whatever, adjust to taste... */
}
#nav ul li a {
    display: block;
    line-height: 2em;
}

虽然padding的{{1}}不会包含在指定的高度内（它将是元素的高度，加上填充加边框宽度），所以'将是li周围的空白区域，除非您指定（对于兼容的浏览器）a以在指定的高度中包含box-sizing: border-box;和border。

Answer 2

容易！

#nav li a {
  color: white;
}

/* When hovering over li, apply styles to child a */
#nav li:hover a {
  color: blue;
}

Answer 3

上面有很多好的建议，但我想提一下你的CSS规则不起作用的原因，这是因为特殊性。您定义的每个CSS选择器都具有计算的特异性，您可以在此处阅读。 http://www.w3.org/TR/css3-selectors/#specificity。这些值用于确定哪些规则优先于其他规则。

请注意，继承的选择器的特异性为0，这在您的情况下非常重要。

#nav ul li { color: #000; }
#nav ul li a { color: #800; }      // This has a specificity of 103 when applied to <A> elements
#nav ul li:hover { color: #080; }  // This has a specificity of 0 when applied to <A> elements because it is inherited from the parent <LI> element.

示例：http://jsfiddle.net/rg4fN/

通过将a元素附加到最后一个选择器，应用于元素时将不再继承它。它现在具有比其他选择器更高的特异性，因此将优先考虑。

#nav ul li a { color: #800; }        // This has a specificity of 103 when applied to <A> elements 
#nav ul li:hover a { color: #080; }  // This has a specificity of 113 when applied to <A> elements

示例：http://jsfiddle.net/NxT29/

Answer 4

尝试像这样的东西

 #nav li a 
{
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;

}

将样式应用于child a

#nav li:hover a 
{
 margin-left: -10px;
 padding-left: 10px;
 background-color: #13118C; 
 font-weight: bold;
 width: 100%;
 color: blue;
 }

悬停在li上时更改文本颜色

4 个答案: