我在 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
如果这样可以使任何事情变得更容易。在此先感谢您的任何反馈,我们将不胜感激。
最佳答案
在纯 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 属性名称。
关于javascript - 在javascript中更改子悬停时父div的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19648504/