将鼠标悬停在菜单项上时更改菜单 link 的背景颜色

Question

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

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

菜单通常是这样的：

这是我希望鼠标悬停在标题上时始终显示的样子：

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

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

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

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

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

Answer 1

给你的菜单项一个 class，比如 menu_item，然后添加 css。

.menu_item:hover {background-color:#000; color:#fff;}

Answer 2

您应该可以这样做：

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

当您将鼠标悬停在列表项上时，这将针对菜单项内的 Link。