html - 停止悬停时 ul-li 的失误行为

Question

我有一个导航菜单，它有一个白色的文本和蓝色的背景，悬停在黑色背景的蓝色文本上，就像selected它的黑色背景的白色文本一样。
但是，如果我将鼠标悬停在它上面，则会显示我不想发生selected menu item的蓝色文本（的属性）。:hover有什么办法可以阻止它？

小提琴： 链接

Answer 1

只需添加.selected:hover案例

main_menu li .selected,
main_menu li .selected:hover{

演示在http://jsfiddle.net/WTeYW/3/

---

此外，由于您的.selected和:hover规则除了颜色之外是相同的，您应该合并它们并仅为差异创建新规则（更好的可维护性）

.main_menu li a:hover,
.main_menu li a.selected{
    box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
    border-color:#888; 
    background:#000; 
}

.main_menu li a:hover{color:#6cf;}
.main_menu li a.selected,
.main_menu li a.selected:hover{color:#ffffff;}

演示，包括http://jsfiddle.net/WTeYW/5/

---

（注意：如果您阅读原始答案，那有点错误。a.selected不是更具体，它同样具体但占主导地位，因为它是CSS文件中的最后一个。上面的更正是这样做的方法。）

Answer 2

我使用 CSS :not(.selected) 来防止 :hover 被执行。

.main_menu li a:not(.selected):hover{

这里：http: //jsfiddle.net/CfeCB/

这就是你的意思吧？

Answer 3

您可以为此使用 css:not()选择器：

.main_menu li a:hover:not(.selected){
    box-shadow:0 20px 30px -10px rgba(255,255,255,0.4);
    border-color:#888; 
    background:#000; 
    color:#6cf;
    }

尝试这个

参考 1