更改菜单项的文本颜色，仅在悬停时答案

【问题标题】：Change text color of menu items, ONLY on hover更改菜单项的文本颜色，仅在悬停时
【发布时间】：2013-09-24 22:14:09
【问题描述】：

我有一个网站here

在屏幕顶部，您会看到一个菜单。将鼠标悬停在“Everything”上，您会看到一个子菜单。

当您将鼠标悬停在某个项目上时，您会在每个菜单项上看到深灰色背景。文本保持红色，我希望文本在悬停时为白色。

这是我目前所拥有的......

#nv-tabs ul li ul li:hover {background: #252525!important; }

看起来文本颜色（悬停时）也应该在这个 div id 中，所以我试过这个......

#nv-tabs ul li ul li:hover {background: #252525!important;color: #FFFFFF;}

...但它不起作用。

不知道我在哪里出错了。

【问题讨论】：

【解决方案1】：

试试这样的#nv-tabs ul li ul li:hover a {color: white !important;}

考虑到你说你的代码不工作......你可能有一些东西直接设置你的<a>标签的文本颜色......这就是为什么你可能需要直接访问你的<a>标签来改变他们文字颜色...

我可以在您的代码中看到这一点：

#nv-tabs a { 
  color: #000000;
}

我认为这就是为什么您必须直接访问您的<a> 标签来更改颜色。如果颜色是用#nv-tabs ul li ul li 设置的，你可以用#nv-tabs ul li ul li:hover 来改变它。

如果有人能说出这种行为，我会很高兴。我不知道它是怎么称呼的，但我很确定它是这样工作的。

【讨论】：

【解决方案2】：

试试

#nv-tabs ul#dyndropmenu.menu li ul.sub-menu li a:hover {
    color:white !important;
}

^ 应该在悬停时使文本变为白色，而其他文本保持红色。

【讨论】：

我的没工作吗？你可以评论我的回答告诉我：p
@Lyth 您的代码有效 :) 只是您需要添加 !important 规则来覆盖 #nv-tabs a:hover { color: #d80000 !important; }
糟糕！好的。我不习惯！重要。我得检查一下。