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

我想在出现链接时更改链接的文本颜色<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;
}

虽然padding of the li不会包含在指定的高度内（它将是元素的高度，加上填充加上边框宽度），因此周围会有一个空白区域a，除非您指定（对于兼容的浏览器）box-sizing: border-box;包括border and padding在指定的高度。