在選擇表格行時，禁用“懸停” 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的附加類。 將懸停效果應用於該類，然后單擊將其從單擊的元素中刪除。 它和您所做的一樣簡單，只是“相反”（刪除類而不是添加類）。 這是現場演示 。