鼠标进入色块，页面背景改变颜色

最新推荐文章于 2023-03-27 19:10:33 发布

淡漠爱清凉

最新推荐文章于 2023-03-27 19:10:33 发布

阅读量512

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Mr_115/article/details/127661762

版权

页面显示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>