CSS：懸停和活躍conflits - 特定情況下

Question

我有以下規則：

.foo { /* default foo style */ } 
.foo:hover { /* hover style */ } 
.fooactive { /* extra styles when active */ } 

在我的錨我打電話像這樣：

onclick="showDetails(123,this)" 

最後上js的功能除了別的以外：

function showDetails(eid, element){ 
    $('.foo').removeClass('fooactive'); 
    $(element).addClass('fooactive'); 
} 

當我點擊時，我應該有一個效果，但我沒有立即看到效果，因爲我也有一個CSS：懸停規則，並且最終看到了這種效果，只有當我推出該元素區域時。

我們怎樣才能禁用懸停，效果一旦我們點擊，以便這種奇怪的效果不會發生？有沒有其他的方法？

Answer 1

更新.fooactive你的CSS規則是這樣的：

.fooactive, .fooactive:hover { /* extra styles when active */ }

這將覆蓋你看到基foo類懸停效果。