Question: I have three coloured boxes in a `div`, all of different colors, and when i `hover` upon any of these boxes i have to make the `background-color` of the parent `div` appear with the same color as the inner-box which is being hovered upon. 

CSS:

```
 .t1_colors {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border: 1px solid rgb(111,61,69);
    }

```

HTML:

```
<div id="task1" class="task">
    <h2>Task 1</h2>
    <p>Change the background color, of the div that     contains this task, to the color in each box when the box is hovered over.</p>
    <p>When the mouse stops hovering over the box, change the background color back to white.</p>
    <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>
</div>

```

Our class is using `addEventListener` if that makes anything any easier. Thanks in advance for any feedback, and will be greatly appreciated.

Answer: 
Look in pure JavaScript:

```
<div>
  <div id="child" onMouseOver="this.parentNode.style.background='red'">Hover Me</div>
</div>

```

With jQuery:

```
 $("#child").hover(function(){
     $(this).parent().css("background","red");
 });

```

UPDATE: not Click, it's Hover. Fixed css property name.
```
var parent = document.getElementById("task1");//get parent element

var item1 = document.getElementById("t1_color_one");//get child element

item1.addEventListener("mouseover", func, false);//add event listener for first item on mouseover and call func when someone mouse overs it

function func()
{  
  parent.setAttribute("style", item1.getAttribute("style"));//set the style attribute of the parent to the style attribute of the child
}

```

and then you can do something similar for the rest of them.