ホバーの背景色を変更できない

Question

this linkを見て、ホバーの背景色を変更できない理由を教えてください。

<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

あなたはホバーする前に余分なスペースを持っています。

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

Answer 2

Edited jsfiddle。 hoverより前の空きスペースを削除してください。

.inline li:hover{ 

    background:#A5A5A5 !important; 
} 

Answer 3

ホバーする前に余分なスペースがあります。それは次のようになります。liと:hover間

.inline li:hover { 
Stylings 
} 

Answer 4

スペースは、この場合には有効なCSSですが、ありません。 li :hoverを使用すると、liの子孫の上にカーソルを置いたときにスタイルが適用されます。使用しているのは無効なCSSです。要素と擬似クラスの間にコロンを置くことはできません。したがって、li:hoverを使用すると、liが上に乗っているときにスタイルを指定します。

!importantを使用しないことをお勧めします。これは後で道路に問題が発生する可能性があるためです。 ul.inline li:hoverのような、より具体的なDOMセレクタを使用してください。

Fiddle

Answer 5

あなたはLiを置いて、李との間にスペースがあるないに重要を使用しているので、それはよ！http://jsfiddle.net/NRZeD/14/

：

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

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

デモを合わせます