Impossibile modificare li Colore di sfondo al passaggio del mouse

Question

Puoi dare un'occhiata allo this link e fammi sapere perché non riesco a cambiare il colore di sfondo del li sul passaggio del mouse?

<ul class="inline"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>3</li> 
    <li>3</li> 
</ul> 

Css:

.inline li{ 
    width:18% !important; 
    background:#FFF !important; 
} 
.inline li: hover{ 
    background:#A5A5A5 !important; 
} 

Answer 1

Hai uno spazio in più prima di passaggio del mouse.

.inline li:hover{ 
    background:#A5A5A5 !important; 
} 

Answer 2

Edited jsfiddle. Rimuovere lo spazio vuoto prima del hover.

.inline li:hover{ 

    background:#A5A5A5 !important; 
} 

Answer 3

Si dispone di uno spazio aggiuntivo prima del passaggio del mouse. Dovrebbe essere:

.inline li:hover { 
Stylings 
} 

Answer 4

Lo spazio tra li e :hover è validato CSS, ma non in questo caso. L'utilizzo di li :hover applica gli stili quando si passa con il mouse su qualsiasi discendente di li. Quello che stai usando è CSS non valido. Non puoi avere due punti tra un elemento e una pseudo-classe. Pertanto, utilizzando li:hover, si specificano gli stili quando si posiziona il cursore su li.

Si consiglia inoltre di non utilizzare !important, perché può causare alcuni problemi in seguito lungo la strada. Usa selettori DOM più specifici, come ul.inline li:hover.

Fiddle

Answer 5

s perché si sta utilizzando importante sulla Li non librarsi e non v'è uno spazio tra Li e : hover

.inline li{ 
    width:18%!important; 
    background:#FFF; 
} 

.inline li:hover{ 
    background:#A5A5A5!important; 
} 

demo: http://jsfiddle.net/NRZeD/14/