根据悬停在另一个元素/类上添加/删除 CSS 文本颜色

Question

我正在使用Superfish 并试图让样式有所不同。基本上，当我将鼠标悬停在带有 ul 的菜单上时，下拉菜单很好，等等。当悬停在该下拉菜单中的元素上时，文本颜色很好，因为我将该元素设置为：hover。

当我没有将鼠标悬停在该元素上时，它使用顶层的颜色。

我希望它保持白色 - 请忽略背景颜色的差异，我正在尝试一些东西。

我的 CSS http://pastebin.com/Hy1Rdwxb

我是否必须使用 jQuery .addClass 才能让它保持白色？

Answer 1

假设这就是它的颜色：

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:             #ae9b9d;
        outline:                0;
        color: #eee !important; 
}

您需要将.sf-menu li:hover 更改/添加到.sf-menu li:hover > a 以获得效果。问题是它不会在悬停时着色，因为a 标签本身有更具体的样式。以上允许使用 CSS 设置 li 正下方的 a 标签。

请注意，> 运算符不是直接在下面设置所有元素的样式，只是您想要的那个，而是won't work in IE 6（因为您的某些样式似乎表明您会支持它，which you shouldn't 除非你的观众强迫你的手），这意味着你仍然会在 IE 6 中看到这种变色。