CSS懸停和UL的主動選擇

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選擇是pretty well supported nowerdays）來指定你只希望改變的錨標記上發生沒有.active類

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

http://jsfiddle.net/srqnuyp7/3/

或者你可以簡單地添加text-shadow:none;作爲附加規則

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

http://jsfiddle.net/srqnuyp7/2/