css - ホバー時にliの背景色を変更できません

Question

このリンクを見て、ホバー時に Li の背景色を変更できない理由を教えてください。

<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

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

!importantまた、後で問題が発生する可能性があるため、使用しないことをお勧めします。など、より具体的な DOM セレクターを使用しますul.inline li:hover。

フィドル

Answer 3

編集された jsfiddle。の前の空白を削除しますhover。

.inline li:hover{

    background:#A5A5A5  !important;
}

Answer 4

ホバーする前に余分なスペースがあります。そのはず：

.inline li:hover {
Stylings
}