鼠标经过时，改变div块的背景色

最新推荐文章于 2024-01-19 17:19:19 发布

转载最新推荐文章于 2024-01-19 17:19:19 发布 · 1.9k 阅读

JavaScript 同时被 2 个专栏收录

64 篇文章

订阅专栏

CSS

31 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现鼠标悬停时改变元素背景色的方法。通过为<li>元素添加和移除特定CSS类来切换背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.aichengxu.com/article/Javascript/40_7.html

鼠标经过时，改变div块的背景色的实现代码，当然也可以用css实现。
HTML部分代码：

<ul>
            <li>鼠标经过时改变背景色</li>
            <li>鼠标经过时改变背景色</li>
            <li>鼠标经过时改变背景色</li>
            <li>鼠标经过时改变背景色</li>
            </ul>
css部分代码：

ul li.current {
            background-color:red;
            cursor:pointer;
            }

javascript部分代码：
当鼠标经过时，给li添加class="current"类，鼠标离开时，去除该类，达到改变背景色的目的

window.onload = function() {
            var lis = document.getElementsByTagName("li");
            for (var i=0; i<lis.length; i++) {
            lis[i].onmouseover = function() {
            this.setAttribute("class", "current");
            }
            lis[i].onmouseout = function() {
            this.setAttribute("class", "");
            }
            }
            }
来源：豆芽博客,地址：http://www.aichengxu.com/article/Javascript/40_7.html保留原文链接,是开源分享的开始.