JavaScript如何设置hover属性?

最新推荐文章于 2023-05-11 21:18:33 发布

Poetry Code

最新推荐文章于 2023-05-11 21:18:33 发布

阅读量3.7w

点赞数 18

分类专栏： JavaScript 文章标签： JavaScript DOM hover 前端

本文链接：https://blog.csdn.net/weixin_44253336/article/details/98313634

版权

JavaScript 专栏收录该内容

24 篇文章 3 订阅

订阅专栏

hover就是选择鼠标指针浮动在其上的元素，并可以设置其样式的。
但是在DOM操作中，我们并不可以直接设置hover属性。而要想有这个效果我们可以直接给元素注册一个onmouseover（鼠标进入）和onmouseout（鼠标离开）事件，然后在事件处理函数中改变标签的样式，这样就可以有hover属性了。

例如：

<body>
<ul>
    <li>雪花</li>
    <li>百威</li>
    <li>燕京</li>
    <li>青岛</li>
    <li>崂山</li>
    <li>珠江</li>
</ul>
</body>

<script>

    //获取所有的li标签
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        //为li注册鼠标进入事件
        list[i].onmouseover = function () {
            //设置其背景颜色为黄色
            this.style.backgroundColor = "yellow";
        };
        //为li注册鼠标离开事件
        list[i].onmouseout = function () {
            //恢复到这个标签默认的颜色
            this.style.backgroundColor = "";
        };
    }
    
</script>

Poetry Code

关注

18
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
JavaScript如何设置hover属性?

hover就是选择鼠标指针浮动在其上的元素，并可以设置其样式的。但是在DOM操作中，我们并不可以直接设置hover属性。而要想有这个效果我们可以直接给元素注册一个onmouseover（鼠标进入）和onmouseout（鼠标离开）事件，然后在事件处理函数中改变标签的样式，这样就可以有hover属性了。例如：<body><ul> <li>雪花&lt...
复制链接

扫一扫