CSS3 disabilita selettivamente l'effetto hover

Question

Ho un elenco non numerato contenente più voci: alcuni elementi sono "titoli", la maggior parte degli articoli sono collegamenti.

Allo stato attuale, ho il seguente CSS per la mia lista:

#result-side-menu li:hover { 
    background-color: rgba(0,0,0,0.15); 
} 

Voglio essere in grado di disabilitare l'hover solo sulle voci di elenco rubrica, mantenendo su tutti gli altri. Il mio migliore (e ancora riuscito) tentativo finora è stato quello di fare questo:

#result-side-menu.li-no-hover li:hover { 
    background-color: none; 
} 

e quindi per applicare la class="li-no-hover" alle voci di elenco rubrica.

C'è un modo per ottenere ciò che sto cercando di fare?

Answer 1

Se si applica class="li-no-hover" ai vostri li elementi non si desidera che l'effetto hover, allora questo è il css si desidera:

#result-side-menu li.li-no-hover:hover { 
    background-color: transparent; 
} 

Answer 2

Si può provare questo:

#result-side-menu li.li-no-hover:hover { 
    opacity:1; 
}