JavaScript与CSS实现鼠标悬停改变列表项背景色的方法

JavaScript实现方案

第1步：构建HTML结构

首先，创建一个包含多个列表项的无序列表。每个列表项作为交互的目标元素。

<ul>
  <li>鼠标经过时改变背景色</li>
  <li>鼠标经过时改变背景色</li>
  <li>鼠标经过时改变背景色</li>
</ul>

第2步：定义CSS样式

我们需要定义一个名为 current 的类，用于设置鼠标悬停时的样式，包括背景色和光标形态。

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

第3步：编写JavaScript逻辑

利用 window.onload 确保页面加载完成后执行脚本。获取所有 <li> 元素，遍历并为每个元素绑定 onmouseover（鼠标进入）和 onmouseout（鼠标离开）事件。在事件中，通过 setAttribute 动态添加或移除 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", "");
    };
  }
};

CSS纯样式方案

如果只需实现简单的鼠标悬停变色效果，无需使用JavaScript。CSS提供了 :hover 伪类，可直接针对链接、按钮等元素的鼠标状态进行样式控制，代码更简洁且性能更好。

具体操作

直接在CSS中选择目标元素并应用 :hover 伪类：

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

优势对比

• 代码简洁性：CSS方案仅需几行代码，而JS方案需要循环绑定事件。
• 维护成本：CSS将样式与逻辑分离，便于后期维护。
• 性能：浏览器对 :hover 有原生优化，处理效率高于JS事件监听。

以上就是JavaScript与CSS实现鼠标悬停改变列表项背景色的详细内容，更多关于前端交互技巧的资料请关注本站其它相关文章！