无法在悬停时更改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.

小提琴