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

Question

我在 div 中有三个彩色框，所有颜色都不同，当我将鼠标悬停在这些框中的任何一个上时，我必须制作背景-父 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>

我们的类(class)正在使用 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 属性名称。