如何使用JavaScript模拟CSS Hover（悬停）效果？

核心逻辑 #

用 JavaScript 模拟 CSS hover 效果，本质是监听元素的两个鼠标事件：

• mouseenter：鼠标移入元素时触发（对应 CSS :hover 的激活状态）
• mouseleave：鼠标移出元素时触发（对应 CSS :hover 的取消状态）

通过这两个事件，我们可以手动修改元素样式，或者切换 CSS 类来实现 hover 效果。

基础实现：直接修改行内样式 #

适合快速测试简单效果，直接操作元素的 style 属性：

<!-- HTML 结构 -->
<div class="demo-box">鼠标移到我上面</div>

// 获取目标元素
const demoBox = document.querySelector('.demo-box');

// 鼠标移入时修改样式
demoBox.addEventListener('mouseenter', () => {
  demoBox.style.backgroundColor = '#2196F3';
  demoBox.style.color = '#fff';
  demoBox.style.padding = '15px';
});

// 鼠标移出时恢复默认样式
demoBox.addEventListener('mouseleave', () => {
  // 清空行内样式，回到 CSS 定义的默认状态
  demoBox.style.backgroundColor = '';
  demoBox.style.color = '';
  demoBox.style.padding = '';
});

推荐写法：用 CSS 类控制（更易维护） #

将样式逻辑放在 CSS 中，JS 只负责切换类名，符合关注点分离原则，也方便后续修改样式：

/* CSS 样式 */
.demo-box {
  padding: 10px;
  border: 1px solid #ddd;
  transition: all 0.3s ease; /* 添加过渡动画，让效果更丝滑 */
}

/* 定义hover激活状态的类 */
.box-hovered {
  background-color: #2196F3;
  color: #fff;
  border-color: #1976D2;
}

<!-- HTML 结构 -->
<div class="demo-box">鼠标移到我上面</div>

// 获取目标元素
const demoBox = document.querySelector('.demo-box');

// 鼠标移入添加激活类
demoBox.addEventListener('mouseenter', () => {
  demoBox.classList.add('box-hovered');
});

// 鼠标移出移除激活类
demoBox.addEventListener('mouseleave', () => {
  demoBox.classList.remove('box-hovered');
});

批量处理多个元素 #

如果页面上有多个需要相同 hover 效果的元素，可以用 querySelectorAll 遍历处理：

<!-- HTML 结构 -->
<button class="hover-btn">按钮1</button>
<button class="hover-btn">按钮2</button>
<button class="hover-btn">按钮3</button>

/* CSS 样式 */
.hover-btn {
  padding: 8px 16px;
  margin: 0 5px;
  border: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-hovered {
  background-color: #FFC107;
  color: #333;
  transform: translateY(-2px);
}

// 获取所有目标按钮
const buttons = document.querySelectorAll('.hover-btn');

// 遍历每个按钮添加事件监听
buttons.forEach(btn => {
  btn.addEventListener('mouseenter', () => {
    btn.classList.add('btn-hovered');
  });
  btn.addEventListener('mouseleave', () => {
    btn.classList.remove('btn-hovered');
  });
});

注意事项 #

• 如果元素已经有 CSS 的 :hover 伪类样式，JS 控制的效果可能会和它冲突，建议统一使用一种方式实现
• 使用 CSS 类控制的方式，比直接修改行内样式更便于维护和扩展
• 添加 transition 属性可以让状态切换更平滑，提升用户体验

内容的提问来源于stack exchange，提问作者Naomi Vera