css :悬停和活动的合并-一个特殊的情况

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的悬停效果。