更新DOM元素后切换效果反转

Question

我有一个带有一些复选框的表格。当用户点击任何复选框时，单元格的内容会被更新。

该表对每组行具有切换效果。当我用jQuery复选框更新单元格时，这种效果会反转。

这是一个简单的问题小提琴。注意切换效果如何被点击复选框后反转，为此该行突出，当鼠标离开，这是不是我在寻找：

http://jsfiddle.net/s4tWd/

这是jQuery的使用：（我不能让。对（ '悬停' ..上的jsfiddle工作）

$(document).ready(function(){ 

    $('tr[data-demo]').hover(function() { 
     var t = $(this); 
     t.siblings('[data-demo="'+t.attr('data-demo')+'"]').toggleClass('hover'); 
     t.toggleClass('hover'); 
    }); 

    $('.demo').click(function(){ 
     $(this).parent().html('text'); 
    }); 

}); 

Answer 1

利用回拨函数删除悬停时设置的类。见Sample

$(document).ready(function(){ 

    $('tr[data-demo]').hover(function() { 
    var t = $(this); 
    t.siblings('[data-demo="'+t.attr('data-demo')+'"]').addClass('hover'); 
    t.addClass('hover'); 
    },function() { 
    var t = $(this); 
    t.siblings('[data-demo="'+t.attr('data-demo')+'"]').removeClass('hover'); 
    t.removeClass('hover'); 
    }); 

    $('.demo').click(function(){ 
     $(this).parent().html('text'); 
    }); 

}); 

Answer 2

更改您的悬停鼠标悬停及移出时，它的工作原理。

$(document).ready(function(){ 
    $('tr[data-demo]').mouseover(function() { 
     var t = $(this); 
     t.siblings('[data-demo="'+t.attr('data-demo')+'"]').addClass('hover'); 
     t.addClass('hover'); 
    }); 
    $('tr[data-demo]').mouseout(function() { 
     var t = $(this); 
     t.siblings('[data-demo="'+t.attr('data-demo')+'"]').removeClass('hover'); 
     t.removeClass('hover'); 
    }); 

    $('.demo').click(function(){ 
     $(this).parent().html('text'); 
    }); 
}); 

小提琴：http://jsfiddle.net/VinnyFonseca/s4tWd/1/