选择悬停无背景答案

【问题标题】：Selected Hover no background选择悬停无背景
【发布时间】：2013-04-17 09:02:29
【问题描述】：

我有一个带有无序列表的 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。

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

例子

【问题讨论】：

标签： jquery css

【解决方案1】：

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

有问题的代码：

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

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

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

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

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

小提琴中的代码：

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

使用这些，不需要那个糟糕的 important:

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

【讨论】：

为什么要添加 ID 选择器？
@MMM 因为#browsecat li:hover（他用于正常悬停）比li.selectedcat:hover更具体。尝试在我的小提琴中更改它，它将不再起作用。
@MMM 他不想 .selectedcat 更改为#browsecat li:hover 指定的颜色。因为悬停使用 ID 选择器，我们必须同样具体才能覆盖它，因此我们需要一个 ID 选择器。
您仍然需要修复您的解决方案：您的第一个解决方案的第三条语句是不必要的，您的第二个解决方案两次使用相同的颜色（因此与第一个解决方案相关）。
@MMM 虽然您对第二个解决方案是正确的，但您对第一个解决方案是不正确的。尝试删除我的 Fiddle 中的第三条语句，您会看到选定的项目在悬停时仍然变灰。

【解决方案2】：

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

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

或者，如果不是，这是a serious one。

【讨论】：

【解决方案3】：

你应该简单地使用：

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

无需使用!important。

【讨论】：

【解决方案4】：

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

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

【讨论】：