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

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;
}

虽然 li 的 padding 不会包含在指定的高度内(它将是元素的高度，加上 padding 加上 border-宽度)，因此 a 周围会有一个空白区域，除非您指定(对于兼容的浏览器)box-sizing: border-box; 以包含 border 和 padding 在指定的高度。