Question

我有一个带有白色文字和蓝色背景的导航菜单，并将其蓝色文字悬停在黑色背景上，其中selected的白色文字为黑色背景。
但如果我将鼠标悬停在{ {1}}它显示了我不希望发生的蓝色文本（selected menu item的属性）。我能以任何方式阻止它吗？

小提琴： link

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）来阻止：悬停被执行。

.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;
    }

Try This

Refrence 1

在悬停时阻止ul-li的错过行为

3 个答案: