在选择表格行时，禁用“悬停” css样式

Question

我有一个表格，其中为每行的“悬停”设置了CSS样式，例如，

#accordion .time_period:hover {
background-color: #d0d0d0;
}

现在，当选择该表的一行时，我正在捕获点击并希望添加一个类，以便随后可以对当前类应用一些CSS格式，例如，

$('.time_period_rows tr').click(function(){
    $(this).toggleClass('selected');
});


#accordion .selected {
    background: #222;
}

这工作到一定程度...但是，我要的是在选择一行时关闭所选行上的悬停效果。 因为现在直到移开鼠标，我才能看到选择格式。

我能想到的唯一方法是设置另一个“悬停”类，该类仅在找到悬停类时才应用悬停CSS，并将该类与选择类一起切换。

我想知道是否有更简单的方法？

Answer 1

这对我来说在Firefox中有效（旧版浏览器无法识别）：

#accordion .time_period:not(.selected):hover {
   background-color: #d0d0d0;
}

如果没有selected类，则仅显示悬停。

小提琴： http ： //jsfiddle.net/rxWKY/

Answer 2

你可以简单地做到这一点

#accordion .selected:hover{background:#222;}

Answer 3

听起来您只需要更新CSS：

#accordion .time_period:hover {
    background-color: #d0d0d0;
}
#accordion .selected,
#accordion .selected:hover {
    background-color: #222;
}

确保.selected的伪类出现在之后，否则您将得到混合的结果。 有关此的更多信息。

Answer 4

您可以使用一个selectable的附加类。 将悬停效果应用于该类，然后单击将其从单击的元素中删除。 它和您所做的一样简单，只是“相反”（删除类而不是添加类）。 这是现场演示 。