页面显示4个颜色块儿,当鼠标进入某个颜色块儿时,页面背景色变成该颜色
<style>
div {
color: #ccc;
font-size: 20px;
font-weight: 700px;
text-align: center;
line-height: 100px;
}
.div_1 {
width: 100px;
height: 100px;
background-color: rgb(0, 255, 213);
}
.div_2 {
width: 100px;
height: 100px;
background-color: rgb(243, 239, 16);
}
.div_3 {
width: 100px;
height: 100px;
background-color: rgb(255, 0, 128);
}
.div_4 {
width: 100px;
height: 100px;
background-color: rgb(11, 219, 80);
}
</style>
<body id="all">
<div id="div1" style="width: 100px;height:100px;background-color:rgb(0, 255, 213);">一年</div>
<div id="div2" style="width: 100px;height:100px;background-color:rgb(243, 239, 16);">四季</div>
<div id="div3" style="width: 100px;height:100px;background-color:rgb(255, 0, 128);">两人</div>
<div id="div4" style="width: 100px;height:100px;background-color:rgb(11, 219, 80);">三餐</div>
<script>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
div1.addEventListener('mousemove', function () {
document.getElementById('all').setAttribute('class', 'div_1');
})
div2.addEventListener('mousemove', function () {
document.getElementById('all').setAttribute('class', 'div_2');
})
div3.addEventListener('mousemove', function () {
document.getElementById('all').setAttribute('class', 'div_3');
})
div4.addEventListener('mousemove', function () {
document.getElementById('all').setAttribute('class', 'div_4');
})
</script>
</body>