基于将鼠标悬停在另一个元素/类上添加/删除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标签本身有更具体的样式。以上内容允许a正下方的li标记使用CSS设置样式。

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