选定哈弗无背景

Question

我有一个混乱的名单。

如果单击某项，则添加所选的类。

所以所选的项目总是类似于

   <li class="selected">

对于我所用的所有李项目。

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

这个很管用。

对于选定的项目，我使用

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

但是，当我点击所选的项目，鼠标仍然在上面(所以鼠标悬停在它上面)，颜色不会改变，但仍然是# click 8从li:悬停，而不是#8B8BFF from.selected :悬停。

如果单击，我怎样才能推翻li:悬停，这样即使在悬停时，带有class=selected的列表项的背景色总是#8B8BFF。

问题是，现在它不是立即可见，如果你点击，颜色没有改变，从正常悬停。

示例

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

Answer 1

编辑:由于解决方案与您的小提琴中的问题不同，我将给您两个解决方案，一个用于问题中的代码，另一个用于Fiddle

有问题的代码：

在:hover声明之间有一个空格，删除它。同时，它也是关于特异性的。li:hover是比.selected:hover更具体的，这是因为li。

使用以下方法保持相同的特性：

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

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

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

演示：http://jsfiddle.net/FCGtc/8/

Fiddle中的代码：

这是因为您的初始悬停选择器是一个比类选择器更具体的匹配(还删除了:hover之间的空间)。

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

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

演示：http://jsfiddle.net/FCGtc/9/

Answer 2

我认为你有这种行为，因为ID总是具有较高的特异性，，tan，class。在您的小提琴，如果我把所有的id改为class，它的工作，如您所期望的。

如果您喜欢“星球大战”，您可以检索更多关于css特性这里的信息。

或者，如果不是，这是严肃的。

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