鼠标移入移出事件

最新推荐文章于 2024-04-29 14:41:33 发布

那一转眼

最新推荐文章于 2024-04-29 14:41:33 发布

阅读量327

点赞数

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

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

版权

案例：当鼠标移入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 = functi

最低0.47元/天解锁文章

那一转眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移入移出事件

案例：当鼠标移入div时，div改变背景颜色，鼠标移出时为最初背景颜色1.创建一个圆形，边框为1px 实线。 <style> h2 { text-align: center; } #one { width: 300px; height: 300px; border: 1px solid; marg
复制链接

扫一扫