2

我想在<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%;
}

但是，这只在链接本身悬停时更改文本颜色。如果鼠标稍微在链接的右侧，背景会发生变化，但文本不会。我希望它使链接右侧的鼠标在功能上与链接本身上的鼠标相同。有没有办法在背景发生时改变文本颜色？

4

4 回答 4

19

然后确保任一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不会li包含在指定的高度内（它将是元素的高度，加上填充加上边框宽度），所以a除非您指定 (对于兼容的浏览器）box-sizing: border-box;将border和包含padding在指定的高度中。

于 2013-06-25T18:47:11.663 回答
5

简单的！

#nav li a {
  color: white;
}

/* When hovering over li, apply styles to child a */
#nav li:hover a {
  color: blue;
}
于 2013-06-25T18:48:26.693 回答
1

上面有很多好的建议，但我想提一下你的 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/

于 2013-06-25T20:20:19.867 回答
0

尝试这样的事情

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

}

将样式应用于子 a

#nav li:hover a 
{
 margin-left: -10px;
 padding-left: 10px;
 background-color: #13118C; 
 font-weight: bold;
 width: 100%;
 color: blue;
 }
于 2013-06-25T19:06:52.267 回答