css :hover and active conflits - a specific case

I have the following rules:

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

On my anchor I'm calling like th开发者_JS百科is:

onclick="showDetails(123,this)"

Finally on the js function I have, among other things:

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

When I click, I should have an effect, but I don't immediately see the effect because, I also have a CSS :hover rule and, I end up seeing that effect, ONLY when I roll out that element area.

How can we disable the hover, effect once we click, so that this weird effect doesn't occur? Is there some other way ?

Update your CSS rule for .fooactive to look like this:

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

This will override the hover effect you see for the base foo class.