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;
}

score 9 · Accepted Answer

在悬停之前你有一个额外的空间。

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

score 6 · Accepted Answer

li和之间的空格:hover是有效的 CSS，但在这种情况下不是。当您将li :hover鼠标悬停在li. 您使用的是无效的 CSS。元素和伪类之间不能有冒号。因此，通过使用，您可以在悬停li:hover时指定样式。li

我还建议您不要使用!important，因为它可能会在以后导致一些问题。使用更具体的 DOM 选择器，例如ul.inline li:hover.

score 2 · Accepted Answer

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

.inline li:hover{

    background:#A5A5A5  !important;
}

score 0 · Accepted Answer

0

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

.inline li:hover {
Stylings
}

于 2013-08-26T17:53:42.293 回答

score 0 · Accepted Answer

这是因为您在 not hover li 上使用!important并且li和:hover之间有一个空格

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

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

5 回答 5