我想在 <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%;
}
但是,这只会在悬停链接本身时更改文本颜色。如果鼠标稍微偏向链接的右侧,背景会发生变化,但文本不会。我希望鼠标在链接右侧与在链接本身上的功能相同。有没有办法在背景改变时改变文字颜色?
最佳答案
然后确保 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;
}
虽然 li
的 padding
不会包含在指定的高度内(它将是元素的高度,加上 padding 加上 border-宽度),因此 a
周围会有一个空白区域,除非您指定(对于兼容的浏览器)box-sizing: border-box;
以包含 border
和 padding
在指定的高度。
关于html - 将鼠标悬停在 li 上时更改文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17305164/