Question

嗨我有悬停和活动菜单项的不同颜色。问题是当项目处于活动状态时，它会在悬停时改变颜色。我希望它能保持活跃的颜色。我的意思是我不希望悬停颜色应用于活动菜单项。

CSS：

li a:hover{ 
   color: black; 
   text-shadow: 0px 1px 0px black;
}

li.active a{ 
   color: #f37121; 
   font-weight: bold; 
   font-size: 17px;
}

Answer 1

您可以将继承添加到活动链接。

只需添加：

li.active a:hover{ color: inherit;}

Answer 2

您只需使用:not(selector)即可。这匹配不是selector的每个元素。

您只需将其添加到li的第一条规则中。

li:not(.active) a:hover{ color: black; text-shadow: 0px 1px 0px black;}

运行以下代码段：

li:not(.active) a:hover{ color: black; text-shadow: 0px 1px 0px black;}
li.active a { color: #f37121; font-weight: bold; font-size: 17px;}

<li><a href="#">inactive link 1</a></li>
<li class="active"><a href="#">active link</a></li>
<li><a href="#">inactive link 2</a></li>

Answer 3

您可以应用:not()（CCS3选择器为{3}} nowerdays）来指定您只希望更改发生在没有.active类

的锚标记上

li:not(.active) a:hover {
    color: black;
    text-shadow: 0px 1px 0px black;
}

或者您只需添加text-shadow:none;作为附加规则

li.active a {
    text-shadow:none;
}