CODEWITHSUNDEEP
javascriptjquerycss
MEM
MEM

Reputation: 31307

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 this:

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 ?

Upvotes: 1

Views: 188

Answers (1)

Nathan Anderson
Nathan Anderson

Reputation: 6878

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.

Upvotes: 4

Related Questions