鼠标移入移出事件

最新推荐文章于 2023-01-10 13:43:37 发布

那一转眼

最新推荐文章于 2023-01-10 13:43:37 发布

阅读量367

点赞数

分类专栏：小案例文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/Sx081/article/details/121164663

版权

本文通过一个实例展示了如何利用JavaScript处理鼠标移入和移出事件，实现元素背景颜色的变化。当鼠标进入div时，div的背景色会改变；鼠标移出后，背景色恢复原状。

摘要由CSDN通过智能技术生成

案例：当鼠标移入div时，div改变背景颜色，鼠标移出时为最初背景颜色

1.创建一个圆形，边框为1px 实线。

    <style>
        h2 {
            text-align: center;
        }
        
        #one {
            width: 300px;
            height: 300px;
            border: 1px solid;
            margin: auto;
            border-radius: 50%;
        }
    </style>
<body>
    <h2>鼠标移入时div变蓝色</h2>
    <div id="one"></div>

</body>

2.js代码

  // 获取div元素
    var div = document.querySelector("#one");
    // 鼠标移入事件 onmouseover
    div.onmouseover = function() {
        //创建一个变量存储随机数，toString(16)为十六进制
            var num = Math.floor(Math.random() * 16777215).toString(16);
            this.style.backgroundColor = "#" + num;
        }
      // 鼠标移出事件 onmouseout
        div.onmouseout = function() {
            this.style.backgroundColor = "" ;
        }

效果：