CSS hover и активный выбор для 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/