在选择表格行时禁用“悬停”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的伪类出现在之后，否则您将获得混合结果。关于here的更多信息。

Answer 4

您可以使用其他课程selectable。而是将悬停效果应用于该类，然后单击，将其从单击的元素中删除。它就像你做的一样简单，只是“反过来”（删除一个类而不是添加它）。 Here's a live demo