に 3 つの色付きのボックスがあり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
、それが何かを簡単にする場合に使用しています。フィードバックをお寄せいただきありがとうございます。