Selected Hover no background

Question

Ho un div wit una lista non ordinata.

Se clicco su un elemento aggiungo la classe selezionata.

quindi l'elemento selezionato è sempre come

<li class="selected"> 

Per tutto l'elemento li io uso.

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

Questo funziona.

e per gli elementi selezionati che uso

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

Ma quando scatto l'elemento selezionato e il mouse è ancora su di esso (per cui il suo bilico su di esso) il cambiamento di colore dosnt, ma è ancora # CECEC8 da li: passa il mouse al posto di # 8B8BFF da.selected: hover.

Come posso ignorare il li: passa con il mouse quando si fa clic in modo che il colore di sfondo di un elemento di elenco con classe = selezionato sia sempre # 8B8BFF anche al passaggio del mouse.

Il problema è che ora non è immediatamente visibile se si fa clic, il colore non cambia dal normale passaggio del mouse.

Esempio

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

Answer 1

EDIT: Dato che la soluzione è diversa al problema nel vostro violino, ti darò due soluzioni, una per il codice in questione e una per il vostro violino

codice in questione:

C'è uno spazio tra la vostra dichiarazione :hover , rimuovilo. Inoltre, si tratta della specificità . li:hover è più specifico rispetto a .selected:hover a causa dello li.

utilizzare la seguente per mantenere lo stesso livello di specificità:

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

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

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

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

Codice in Fiddle:

E 'perché il vostro selettore hover iniziale è un più specifica corrisponde a rispetto al selettore di classe (rimuovi anche lo spazio tra :hover).

utilizzare questi, non c'è bisogno per questo dio terribileimportant:

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

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

Answer 2

penso che avere questo comportamento perché ID hanno sempre una specificità più alta tan class. Nel tuo violino, se cambio tutto il id in class, funziona come previsto.

Se ti piace Star Wars, puoi recuperare ulteriori informazioni sulla specificità css here.

Oppure, in caso contrario, è a serious one.

Answer 3

Si dovrebbe utilizzare semplicemente:

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

Non c'è bisogno di usare !important.

http://jsfiddle.net/8vYqM/

PS: Si dovrebbe conoscere css specificità: http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 4

di ignorare: passa è necessario essere più specifici, e l'uso: passa

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