本文介绍如何使用JavaScript监听鼠标经过和离开事件，通过动态添加或移除CSS类来改变列表项的背景色。同时提供了纯CSS的:hover伪类实现方案作为更简洁的替代方法，帮助开发者理解JS与CSS在交互效果上的不同实现路径。
HTML结构基础
HTML结构部分：
具体实现代码如下：
<ul>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
<li>鼠标经过时改变背景色</li>
</ul>JavaScript交互实现
JavaScript逻辑部分：
核心思路是当鼠标指针移入列表项时，为其动态添加名为“current”的CSS类；当鼠标移开时，则移除该类，从而触发背景色的变化效果。
JavaScript代码实现如下：
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样式定义与替代方案
CSS样式部分：
对应的CSS样式代码如下：
ul li.current {
background-color:red;
cursor:pointer;
} 上述代码旨在帮助读者深入理解JavaScript的交互逻辑。此外，下面提供了一种仅使用CSS实现的版本作为对比参考。
<style type="text/css"> ul li:hover { background-color:red; cursor:pointer; } </style> <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]