javascript - CSS :hover and active conflits - a specific case

Question

我有以下规则:

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

在我的 anchor 上，我这样调用:

onclick="showDetails(123,this)"

最后是我拥有的 js 函数，除此之外:

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

当我点击时，我应该会产生效果，但我并没有立即看到效果，因为我还有一个 CSS :hover 规则，我最终看到了那个效果，只有当我展开那个元素区域时。

我们如何才能在单击时禁用悬停效果，从而不会出现这种奇怪的效果？还有别的办法吗？

Answer 1

将 .fooactive 的 CSS 规则更新为如下所示:

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

这将覆盖您在 foo 基类中看到的悬停效果。