当一个元素及其所有子元素悬停在jquery时，它会改变它们的背景

Question

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

然后，我想更改每个backgounrd-color的{​​{1}}以及所有孩子（<tr>和<div>的孩子（其他div））当鼠标移动{{ 1}}

然后我用了这个：

<div>

但它不会改变<tr>

中div的背景

我怎样才能实现

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
});