title: Change background colour of parent div on child hover in javascript?
body: <p>I have three coloured boxes in a <code>div</code>, all of different colors, and when i <code>hover</code> upon any of these boxes i have to make the <code>background-color</code> of the parent <code>div</code> appear with the same color as the inner-box which is being hovered upon. </p>
  
  <p>CSS:</p>
  
  <pre><code> .t1_colors {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 20px;
      border: 1px solid rgb(111,61,69);
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="task1" class="task"&gt;
      &lt;h2&gt;Task 1&lt;/h2&gt;
      &lt;p&gt;Change the background color, of the div that     contains this task, to the color in each box when the box is hovered over.&lt;/p&gt;
      &lt;p&gt;When the mouse stops hovering over the box, change the background color back to white.&lt;/p&gt;
      &lt;div id="t1_color_one" class="t1_colors" style="background: goldenrod;"&gt;&lt;/div&gt;
      &lt;div id="t1_color_two" class="t1_colors" style="background: lightgreen;"&gt;&lt;/div&gt;
      &lt;div id="t1_color_three" class="t1_colors" style="background: palevioletred;"&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Our class is using <code>addEventListener</code> if that makes anything any easier. Thanks in advance for any feedback, and will be greatly appreciated.</p>