title: change background of one element and all its children when it is hovered jquery
body: <p>I have a table which all <code>&lt;tr&gt;</code> that contains a lot of <code>&lt;div&gt;</code> and each one can contains many others (they are generated automatically)</p>
  
  <p>then, I want to change <code>backgounrd-color</code> of each <code>&lt;tr&gt;</code> and all of children (<code>&lt;div&gt;</code> and children of <code>&lt;div&gt;</code> (others div)) when the mousemove the <code>&lt;tr&gt;</code> </p>
  
  <p>then I used this : </p>
  
  <pre><code>$('.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');
          });
  </code></pre>
  
  <p>but it doesn't change the background of the div inside the <code>&lt;tr&gt;</code></p>
  
  <p>how can I achive that </p>