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