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

【问题标题】：Change background colour of menu link when hovering over menu item将鼠标悬停在菜单项上时更改菜单链接的背景颜色
【发布时间】：2015-02-24 03:20:28
【问题描述】：

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

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

这是菜单通常的样子：

这是我希望它在将鼠标悬停在标题上时一直看起来的样子：

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

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

有没有办法将链接中的文本颜色设置为在标题框悬停时更改为白色，而不仅仅是在实际文本悬停时更改为白色？

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

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

【问题讨论】：

【解决方案1】：

你应该可以做这样的事情：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：