Javascript css：悬停和活动冲突-一种特殊情况

我有以下规则：

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

onclick="showDetails(123,this)"

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

在我的主播上，我这样称呼：

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

onclick="showDetails(123,this)"

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

最后，关于js函数，除其他外：

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

onclick="showDetails(123,this)"

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

当我点击时，我应该有一个效果，但我不会立即看到效果，因为我还有一个CSS:hover规则，只有当我在元素区域展开时，我才会看到效果

---

我们如何在单击鼠标后禁用悬停效果，以避免出现这种奇怪的效果？还有其他方法吗？

更新

.fooactive

的CSS规则，如下所示：

.fooactive.fooactive:hover{/*激活时的额外样式*/}

---

这将覆盖基本

foo

类的悬停效果。

更新

.fooactive

的CSS规则，如下所示：

.fooactive.fooactive:hover{/*激活时的额外样式*/}

这将覆盖基本

foo

类的悬停效果