悬停在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;
}

虽然padding的li将不被包括在指定高度内(这将是该元素的高度,加上衬垫加上边框宽度),所以就会有围绕一个空的空间a,除非你指定(对于兼容的浏览器)box-sizing: border-box;包括border和padding在指定的高度.

Answer 2

简单的！

#nav li a {
  color: white;
}

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