选中Hover没有背景

Question

我有一个无序列表。

如果我点击某个项目，我会添加所选的课程。

所以所选项目总是像

   <li class="selected">

对于我使用的所有li项目。

   li:hover
{
    background-color:#CECEC8;
}

这很有效。

和我使用的选定项目

.selected
{
    background-color:#8B8BFF;   
}
.selected :hover
{
    background-color:#8B8BFF;
}

但是当我单击所选项目并且鼠标仍在其上时（因此将鼠标悬停在它上面）颜色剂量会发生变化，但仍然是＃CECEC8来自li：hover而不是＃8B8BFF from.selected：hover。

我如何否决li：点击时悬停，因此即使在悬停时，class = selected的列表项的背景颜色也始终为＃8B8BFF。

现在的问题是，如果你点击它就不会立即看到，颜色剂量从正常悬停变化。

实施例

http://jsfiddle.net/FCGtc/1/

Answer 1

编辑：由于解决方案与你的小提琴中的问题不同，我会给你两个解决方案，一个用于问题中的代码，一个用于你的小提琴

有问题的代码：

你的:hover声明之间有一个空格，删除它。此外，它是关于特异性。由于li:hover，.selected:hover 更具体而不是li。

使用以下内容保持相同的特异性：

li:hover
{
    background-color:#CECEC8;
}

li.selected
{
    background-color:#8B8BFF;   
}

li.selected:hover
{
    background-color:#8B8BFF;
}

DEMO：http://jsfiddle.net/FCGtc/8/

小提琴代码：

这是因为您的初始悬停选择器比您的类选择器更具体的匹配（同时删除了:hover之间的空格）。

使用这些，不需要上帝可怕 important：

#browsecat li.selectedcat
{
    background-color:#8B8BFF;   
}

DEMO：http://jsfiddle.net/FCGtc/9/

Answer 2

我认为您有这种行为，因为ID始终具有更高的特异性 tan class。在你的小提琴中，如果我将所有id更改为class，它就会按预期工作。

如果你喜欢星球大战，你可以检索更多关于css特异性here的信息。

或者，如果没有，则为a serious one。

Answer 3

您应该使用：

#browsecat li:hover
{
    background-color:#CECEC8;
}
#browsecat li.selectedcat
{
    background-color:#8B8BFF;   
}

无需使用!important。

http://jsfiddle.net/8vYqM/

PS：您应该了解css特异性：http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 4

要覆盖：悬停你需要更具体，并使用：hover

li.selected:hover {
  background-color:#8B8BFF;
}