CODEWITHSUNDEEP
javascriptcsscolorshover
Jeremy Stone
Jeremy Stone

Reputation: 350

Change background colour of parent div upon child hover in css?

I'm working on a web design assignment and I'm fairly uncomfortable with most css styles thus far, this task involves 3 coloured boxes in a div. I have to turn the white background of this div to the same colour of the box when the box is hovered.

HTML:

            <div id="t1_color_one" class="t1_colors" style="background: goldenrod;"></div>
            <div id="t1_color_two" class="t1_colors" style="background: lightgreen;"></div>
            <div id="t1_color_three" class="t1_colors" style="background: palevioletred;"></div>

Not trying to be "that guy" who asks stupid questions.. but I literally have no idea how to approach this. Thanks for any tips, greatly appreciated

Upvotes: 1

Views: 1932

Answers (3)

Khamidulla
Khamidulla

Reputation: 2975

Here is answer in pure javascript

window.addEventListener('load', function(event)
{
    var divs = document.getElementsByClassName('t1_colors');
    var count_of_divs = divs.length;

    for(var i = 0; i<count_of_divs; i++)
    {
        divs[i].addEventListener('mouseover', function(e)
        {
            document.getElementById('task1').setAttribute('style', e.target.getAttribute('style'));
        }, false);

        divs[i].addEventListener('mouseout', function(e)
        {
            document.getElementById('task1').removeAttribute('style');
        }, false)
    }
}, false);

And you can check it in jsFiddle link.

Upvotes: 0

VenomVendor
VenomVendor

Reputation: 15382

here is working example, is this what you wanted >> http://jsfiddle.net/mbTBu/

$(document).ready(function(){
  $(".t1_colors").hover(function(){
    var $c=$(this).css("background-color");
        $("#task1").css('background-color', $c);
  });
});

you can also use, mouseover & mouseout function to revert back the color. http://jsfiddle.net/mbTBu/2/

Upvotes: 1

sissy
sissy

Reputation: 2988

I think Jeremy means that the outside div id="task1" has to assume the color of the hovered inside div, so the solution is to use javascript:

$('.t1_colors').hover(function(){
   $('#task1').css('background-color', $(this).css('background-color'));
},
 function(){
   $('#task1').css('background-color', white);
 }
);

Upvotes: 1

Related Questions