更新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/