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.