In my table, I have implemented a CSS style for the hover effect on each row as shown below:
#accordion .time_period:hover {
background-color: #d0d0d0;
}
When a row in the table is clicked, I am capturing the click event and adding a class to apply additional CSS formatting, like so:
$('.time_period_rows tr').click(function(){
$(this).toggleClass('selected');
});
#accordion .selected {
background: #222;
}
While this solution works, I would like to disable the hover effect on the selected row. Currently, the selection formatting only appears when the mouse is moved away.
One workaround I can think of is creating another "hover" class that applies the hover CSS only if it finds the hover class, and toggling this class along with the selection class.
I am curious if there is a simpler way to achieve this?