在javascript中的子悬停时更改父div的背景颜色？

Question

我在 a 中有三个彩色框div，所有颜色都不同，当我hover在这些框中的任何一个上时，我必须使background-color父div框的颜色与悬停在其上的内框的颜色相同。

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>

addEventListener如果这让任何事情变得更容易，我们的班级正在使用。在此先感谢您的任何反馈，我们将不胜感激。

Answer 1

在纯 JavaScript 中查看：

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

使用 jQuery：

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

更新：不是点击，而是悬停。固定的 css 属性名称。