jquery - 选择悬停无背景

Question

我有一个带有无序列表的 div。

如果我点击一个项目，我会添加所选的类。

所以选定的项目总是像

   <li class="selected">

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

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

这行得通。

对于我使用的选定项目

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

但是，当我单击所选项目并且鼠标仍在其上（因此它悬停在其上）时，颜色不会改变，但仍然是来自 li:hover 的 #CECEC8 而不是来自.selected :hover 的 #8B8BFF。

我如何在单击时否决 li:hover 以便具有 class=selected 的列表项的背景颜色始终为 #8B8BFF，即使在悬停时也是如此。

现在的问题是如果您单击它不会立即可见，颜色不会从正常悬停改变。

例子

score 1 · Accepted Answer

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

有问题的代码：

你的声明之间有一个空格:hover，删除它。此外，它与特异性有关。li:hover比因为更具体。.selected:hoverli

使用以下方法来保持相同级别的特异性：

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

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

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

小提琴中的代码：

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

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

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

score 0 · Accepted Answer

要覆盖 :hover 你需要更具体，并使用 :hover

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

score 0 · Accepted Answer

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

如果您喜欢《星球大战》，可以在此处检索有关 CSS 特异性的更多信息。

或者，如果不是，这是一个严重的问题。

score 0 · Accepted Answer

你应该简单地使用：

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

无需使用!important.

4 回答 4