jquery - 悬停jquery时更改一个元素及其所有子元素的背景

Question

我有一个表，其中<tr>包含很多，<div>每个表都可以包含许多其他表（它们是自动生成的）

然后backgounrd-color，当<tr>鼠标移动<div><div><tr>

然后我用这个：

$('.ui-datagrid-column').live('mousemove',function(){
            $(this).css('background-color', 'red');
            $(this).children().css('background-color', 'red');
            //ui-layout-unit-content ui-widget-content

        });
         //.ui-layout-container
        $('.ui-datagrid-column').live('mouseleave',function(){
            $(this).css('background-color', 'white');
            $(this).children().css('background-color', 'white');
        });

但它不会改变 div 内部的背景<tr>

我怎样才能做到这一点

Answer 1

只需使用 CSS，您就可以很容易地获得这种效果。

基本上，你可以tr:hover *在你的 CSS 中设置background-color你想要的，它会被它下面的所有元素继承。因此，现在当您将鼠标悬停在该行上时，它将覆盖或设置tr.

这是一个示例jsfiddle。

Answer 2

    $('.ui-datagrid-column').hover(function(){$(this).addClass('background');
    $(this).children.addClass('background'); 
    //this will add a background class (something like background-color: red;)
    //I guess this will work, I never added classes to children
    }
    ,function(){$(this).removeClass('background');
    $(this).children.removeClass('background')
    //this will remove it again on mouse out
});