在jQuery点击事件后，悬停操作被反转

Question

当光标位于其中一列时，我正在使用系统突出显示2列。

然后，用户可以通过单击将每个单元格中的值从No更改为Yes。 发生这种情况时，hover操作似乎有效。它在光标位于外部时起作用。

这是我的例子的小提琴： http://jsfiddle.net/L9Kfq/

当我单击以更改单元格的值时，列应保持突出显示。 为什么会这样？

感谢。

Answer 1

我简化了你的jQuery，并使用mouseover和mouseout代替hover。我希望下面的代码段是不言自明的。

$('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');
});

另请参阅更新的jsFiddle。