JavaScript如何设置hover属性?

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>

Poetic Code

发布了47 篇原创文章 · 获赞 340 · 访问量 16万+

私信关注

JavaScript如何设置hover属性?

猜你喜欢