Question

请你看一下this link，让我知道为什么我无法在悬停时更改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

Edited jsfiddle。删除hover之前的空白区域。

.inline li:hover{

    background:#A5A5A5  !important;
}

Answer 4

悬停前你有一个额外的空间。它应该是：

.inline li:hover {
Stylings
}

Answer 5

这是因为你在非悬停的li上使用！important ，并且 li 和之间有空格：悬停

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

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