Selected Hover no background

Question

У меня есть div с неупорядоченным списком.

Если я нажимаю на элемент, я добавляю выбранный класс.

поэтому выбранный элемент всегда подобен

<li class="selected"> 

Для всех элемента Li я использую.

li:hover 
{ 
    background-color:#CECEC8; 
} 

Это работает.

и для выбранных элементов я использую

.selected 
{ 
    background-color:#8B8BFF; 
} 
.selected :hover 
{ 
    background-color:#8B8BFF; 
} 

Но когда я нажимаю выбранный элемент, а мышь все еще находится на нем (так его парящей над ним) цвет dosnt изменения, но по-прежнему # CECEC8 от литий: hover вместо # 8B8BFF from.selected: hover.

Как я могу отменить li: hover при нажатии, чтобы цвет фона элемента списка с выбранным классом всегда был # 8B8BFF даже при наведении.

Проблема в том, что это не сразу видно, если вы нажали, цвет dosnt изменился с обычного наведения.

Пример

http://jsfiddle.net/FCGtc/1/

Answer 1

EDIT: Поскольку решение отличается от проблемы в вашей скрипке, я дам вам два решения, один для кода в вопросе и один для вашего Fiddle

код в вопросе:

Там есть пространство между :hover декларации , удалите это. Кроме того, это примерно Специфика. li:hover является более конкретно чем .selected:hover из-за li.

Используйте следующие действия, чтобы сохранить тот же уровень специфичности:

li:hover 
{ 
    background-color:#CECEC8; 
} 

li.selected 
{ 
    background-color:#8B8BFF; 
} 

li.selected:hover 
{ 
    background-color:#8B8BFF; 
} 

DEMO: http://jsfiddle.net/FCGtc/8/

Код в Fiddle:

Это потому, что ваш первоначальный селектор парения является более конкретным сопоставьте, чем ваш селектор классов (также удалите пробел между :hover).

Используйте их, не нужна для этого бога ужасногоimportant:

#browsecat li.selectedcat 
{ 
    background-color:#8B8BFF; 
} 

DEMO: http://jsfiddle.net/FCGtc/9/

Answer 2

Я думаю, что у вас есть такое поведение, потому что ID всегда имеют более высокую специфичность загар class. В вашей скрипке, если я изменю все id на class, он работает так, как вы ожидали.

Если вам нравится Звездные войны, вы можете получить дополнительную информацию о специфике css here.

Или, если нет, это a serious one.

Answer 3

Вы должны просто использовать:

#browsecat li:hover 
{ 
    background-color:#CECEC8; 
} 
#browsecat li.selectedcat 
{ 
    background-color:#8B8BFF; 
} 

Нет необходимости использовать !important.

http://jsfiddle.net/8vYqM/

PS: Вы должны узнать о CSS специфичностью: http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 4

переопределять: парить вы должны быть более конкретными, и использование: парить

li.selected:hover { 
    background-color:#8B8BFF; 
}