html 将鼠标悬停在li上时更改文本颜色

s4n0splo  于 2023-06-20  发布在  其他
关注(0)|答案(4)|浏览(236)

当鼠标悬停在<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%;
}

但是,这只会在悬停在链接本身上时更改文本颜色。如果鼠标稍微靠右一点,背景会改变,但文本不会。我想它,使鼠标被链接的权利是功能相同的,因为它是在链接本身。有没有一种方法可以让文本的颜色随着背景的变化而变化?

bttbmeg0

bttbmeg01#

然后确保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;
}

虽然lipadding不会包含在指定的高度内(它将是元素的高度,加上填充加上边框宽度),所以a周围会有一个空的空间,除非您指定(对于兼容的浏览器)box-sizing: border-box;borderpadding包含在指定的高度中。

cetgtptt

cetgtptt2#

别紧张!

#nav li a {
  color: white;
}

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

yhxst69z3#

上面有很多很好的建议,但我想提一下为什么你的CSS规则不起作用的原因,这是因为特定性。您定义的每个CSS选择器都有一个计算的特异性,您可以在这里阅读。这些值用于确定哪些规则优先于其他规则。http://www.w3.org/TR/css3-selectors/#specificity. Those values are used to determine which rules take precedence over others.
请注意,继承的选择器的特异性为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/

hmae6n7t

hmae6n7t4#

尝试这样的东西

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

}

将样式应用于子级

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

相关问题