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ルールを更新します。これは、あなたが基本fooクラスを参照ホバー効果を上書きします

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

。