当前位置：首页 > JavaScript

js实现hover

2026-04-06 22:04:31JavaScript

Hover 效果的 JavaScript 实现

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

通过事件监听修改样式

为元素添加 mouseenter 和 mouseleave 事件，直接修改元素的 style 属性：

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

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

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

通过类名切换样式

更推荐通过添加/移除 CSS 类的方式实现，便于维护：

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

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

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

对应的 CSS：

.hover-target {
  background-color: white;
  transition: background-color 0.3s;
}

.hover-target.hover-active {
  background-color: lightblue;
}

动态显示隐藏内容

实现 hover 时显示子元素（如提示框）：

const trigger = document.querySelector('.tooltip-trigger');
const tooltip = document.querySelector('.tooltip');

trigger.addEventListener('mouseenter', () => {
  tooltip.style.display = 'block';
});

trigger.addEventListener('mouseleave', () => {
  tooltip.style.display = 'none';
});

事件委托实现批量 hover

对于动态生成的多个元素，使用事件委托优化性能：

document.addEventListener('mouseover', (event) => {
  if (event.target.matches('.hover-item')) {
    event.target.classList.add('hover-state');
  }
});

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

高级应用：延时 hover 效果

实现 hover 后延迟显示的效果（如菜单延迟关闭）：

js实现hover

let hoverTimer;
const dropdown = document.querySelector('.dropdown');

dropdown.addEventListener('mouseenter', () => {
  clearTimeout(hoverTimer);
  dropdown.classList.add('open');
});

dropdown.addEventListener('mouseleave', () => {
  hoverTimer = setTimeout(() => {
    dropdown.classList.remove('open');
  }, 300);
});