Hover action gets inverted after click event at jQuery

Question

I am using a system to highlight 2 columns when the cursor is over one of them.

Then, the user can change the value from No to Yes inside each cell by clicking on it. When this happens, the hover action seems to works inverted. It acts when the cursor is outside instead.

Here is the fiddle with my example: http://jsfiddle.net/L9Kfq/

The columns should keep being highlight when i click to change the value of a cell. Why is this happening?

Thanks.

Answer 1

I simplified your jQuery a little bit, and used mouseover and mouseout instead of hover. I hope the code segment that follows is self-explanatory.

$('td,th').on('mouseover', function() {
    $('td:not(.'+$(this).attr('class')+')').addClass('active');
    $('td.'+$(this).attr('class')).removeClass('active');
});

$('td,th').on('mouseout', function() {
    $('td').removeClass('active');
});

Also see updated jsFiddle.