当鼠标悬停在<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条答案
按热度按时间bttbmeg01#
然后确保
a
从其父节点继承颜色:或者指定一个选择器来显式地将相同的颜色应用于
a
元素:当然,你也可以让
a
填充li
元素,使用:如果您为
li
指定了一个高度,那么使用相同的高度(使用之前的display: block
规则),a
也将在li
内垂直居中,例如:虽然
li
的padding
不会包含在指定的高度内(它将是元素的高度,加上填充加上边框宽度),所以a
周围会有一个空的空间,除非您指定(对于兼容的浏览器)box-sizing: border-box;
将border
和padding
包含在指定的高度中。cetgtptt2#
别紧张!
yhxst69z3#
上面有很多很好的建议,但我想提一下为什么你的CSS规则不起作用的原因,这是因为特定性。您定义的每个CSS选择器都有一个计算的特异性,您可以在这里阅读。这些值用于确定哪些规则优先于其他规则。http://www.w3.org/TR/css3-selectors/#specificity. Those values are used to determine which rules take precedence over others.
请注意,继承的选择器的特异性为0,这在您的情况下很重要。
示例:http://jsfiddle.net/rg4fN/
通过将
a
元素附加到最后一个选择器,当应用于元素时,它将不再被继承。它现在具有比其他选择器更高的特异性,因此将优先。示例:http://jsfiddle.net/NxT29/
hmae6n7t4#
尝试这样的东西
将样式应用于子级