On selection of a table row disable “hover” css styling

Question

I have a table, in which I have a CSS style set for the "hover" over each row, for example,

#accordion .time_period:hover {
background-color: #d0d0d0;
}

Now, when a row of that table is selected I am capturing the click and hoping to add a class so that I can then applying some CSS formatting to that now class, for example,

$('.time_period_rows tr').click(function(){
    $(this).toggleClass('selected');
});


#accordion .selected {
    background: #222;
}

This works to a point... however, what I want is to turn the hover effect off on the selected row when a row is selected. Because right now I don't see the selection formatting until I move the mouse away.

The only way I can think of doing this is setting up another "hover" class that only applies the hover css when it finds the hover class, and toggle that class along with the selection class.

I'm wondering if there is an easier way?

Answer 1

This worked in Firefox for me (older browsers would not recognize):

#accordion .time_period:not(.selected):hover {
   background-color: #d0d0d0;
}

It only shows the hover if not having the selected class.

Fiddle: http://jsfiddle.net/rxWKY/

Answer 2

你可以简单地做到这一点

#accordion .selected:hover{background:#222;}

Answer 3

Sounds like you just need to update your css:

#accordion .time_period:hover {
    background-color: #d0d0d0;
}
#accordion .selected,
#accordion .selected:hover {
    background-color: #222;
}

Make sure the pseudo-class for .selected appears after or you'll get mixed results. More info on that here .

Answer 4

You can use an additional class selectable . Apply the hover effect to that class instead, and on click, remove it from the clicked element. It's as easy as what you do, just "the other way round" (remove a class instead of adding it). Here's a live demo .