CODEWITHSUNDEEP
jquerycssdynamichoverchildren
simonTifo
simonTifo

Reputation: 307

change background of one element and all its children when it is hovered jquery

I have a table which all <tr> that contains a lot of <div> and each one can contains many others (they are generated automatically)

then, I want to change backgounrd-color of each <tr> and all of children (<div> and children of <div> (others div)) when the mousemove the <tr>

then I used this : 

$('.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');
        });

but it doesn't change the background of the div inside the <tr>

how can I achive that

Upvotes: 0

Views: 2507

Answers (2)

Ruben Smit
Ruben Smit

Reputation: 53

    $('.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
});

Upvotes: 0

Matthew Green
Matthew Green

Reputation: 10401

You can get this effect very easily with just CSS.

Basically, you would set tr:hover * in your CSS with the background-color you want and it will be inherited by all of the elements below it. So now when you hover over that row it will override or set the background color of your elements in the tr.

Here is an example jsfiddle.

Upvotes: 2

Related Questions