css - 将鼠标悬停在菜单项上时更改菜单链接的背景颜色

Question

编辑:澄清一下，当我将鼠标悬停在菜单框上时，我希望链接颜色发生变化，而不是链接。当我将鼠标悬停在链接上时，链接颜色已经发生变化。

我可以用屏幕截图更好地解释我的问题。光标未显示在其中。到目前为止，我只有主菜单标题链接到某些内容。

菜单通常是这样的:

这就是我希望它在悬停在标题上时始终看起来的样子:

正如您在下面看到的，当我将鼠标悬停在该标题框上时，“主菜单”文本消失了。它仅在我将鼠标悬停在文本上时出现。在这张图片中，我的光标位于主菜单框的右下角。在下一张图片中，它悬停在文本上。只是指出我认为显而易见的问题。

我将链接中的所有文本颜色默认设置为黑色，悬停时设置为白色。将鼠标悬停在菜单标题上时，我将菜单标题的背景颜色设置为黑色。这就是问题发生的地方。

有没有一种方法可以将链接中的文本颜色设置为在悬停标题框时变为白色，而不仅仅是悬停实际文本时？

a{
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #fff;
}

ul li:hover {
  background: #000;
  color: #fff; 
}

Answer 1

你应该能够做这样的事情:

ul li:hover a {
     color: #fff;
}

当您将鼠标悬停在列表项上时，这将以菜单项内的链接为目标。