js实现 hover

实现 hover 效果的 JavaScript 方法

使用 JavaScript 实现 hover 效果可以通过监听鼠标事件（mouseenter 和 mouseleave）来动态修改元素的样式或行为。以下是几种常见实现方式：

监听鼠标事件修改样式

通过 addEventListener 绑定 mouseenter 和 mouseleave 事件，直接修改元素的 style 属性：

const element = document.getElementById('target');

element.addEventListener('mouseenter', () => {
  element.style.backgroundColor = 'lightblue';
  element.style.transition = 'background-color 0.3s';
});

element.addEventListener('mouseleave', () => {
  element.style.backgroundColor = '';
});

动态添加/移除 CSS 类

通过切换 CSS 类实现样式变化，便于维护和复用：

/* CSS 部分 */
.hover-effect {
  background-color: lightblue;
  transition: background-color 0.3s;
}

const element = document.querySelector('.hover-target');

element.addEventListener('mouseenter', () => {
  element.classList.add('hover-effect');
});

element.addEventListener('mouseleave', () => {
  element.classList.remove('hover-effect');
});

使用事件委托优化性能

对于动态生成或大量元素的情况，可通过事件委托减少监听器数量：

document.addEventListener('mouseover', (event) => {
  if (event.target.matches('.hover-item')) {
    event.target.style.transform = 'scale(1.05)';
  }
});

document.addEventListener('mouseout', (event) => {
  if (event.target.matches('.hover-item')) {
    event.target.style.transform = '';
  }
});

结合 CSS 变量实现动态效果

通过 JavaScript 修改 CSS 变量实现更灵活的效果：

:root {
  --hover-color: lightblue;
}

.hover-var {
  transition: background-color 0.3s;
  background-color: var(--hover-color, transparent);
}

const element = document.getElementById('dynamic-hover');
element.addEventListener('mouseenter', () => {
  element.style.setProperty('--hover-color', 'pink');
});

注意事项

• 性能优化：频繁触发 hover 事件时（如表格行），建议使用 requestAnimationFrame 节流。
• 移动端兼容：部分移动设备可能不会触发 mouseleave，需额外处理 touch 事件。
• 无障碍访问：确保 hover 效果不影响键盘导航，可通过 :focus 状态同步样式。

替代方案

对于简单交互，优先考虑纯 CSS 实现（性能更好）：

.button:hover {
  background-color: lightblue;
  transform: translateY(-2px);
}