JS鼠标经过时背景变色

在JavaScript中，当鼠标悬停（即“经过”）元素时改变其背景颜色通常通过CSS样式结合JavaScript事件监听来实现。这里是一个简单的例子：

HTML部分：

<button id="myButton">点击我</button>

CSS部分（添加一个默认背景色和过渡效果）：

#myButton {
  background-color: #ccc;
  transition: background-color 0.5s; /* 添加过渡效果 */
}

JavaScript部分（处理鼠标经过事件）：

document.getElementById("myButton").addEventListener("mouseover", function() {
  this.style.backgroundColor = "red"; // 当鼠标经过时，背景变为红色
});

// 鼠标移开时恢复原色
document.getElementById("myButton").addEventListener("mouseout", function() {
  this.style.backgroundColor = "ccc"; // 或者根据需要设置回原来的颜色
});

在这个示例中，当你将鼠标移动到按钮上时，背景会从灰色渐变变化为红色；当鼠标离开时，背景又会回到初始的灰色。