当前位置：首页 > JavaScript

js实现 hover

2026-04-06 19:22:04JavaScript

实现 hover 效果的方法

在 JavaScript 中实现 hover 效果可以通过监听鼠标事件或结合 CSS 伪类来实现。以下是几种常见的方法：

使用 CSS 伪类

CSS 的 :hover 伪类是最简单的方式，无需 JavaScript：

js实现 hover

.element:hover {
  background-color: #f0f0f0;
  color: #000;
}

使用 JavaScript 事件监听

通过 JavaScript 监听 mouseenter 和 mouseleave 事件动态修改样式：

const element = document.querySelector('.element');
element.addEventListener('mouseenter', () => {
  element.style.backgroundColor = '#f0f0f0';
  element.style.color = '#000';
});
element.addEventListener('mouseleave', () => {
  element.style.backgroundColor = '';
  element.style.color = '';
});

动态添加/移除 CSS 类

结合 CSS 和 JavaScript，通过添加或移除类名实现 hover 效果：

js实现 hover

.element-hover {
  background-color: #f0f0f0;
  color: #000;
}

const element = document.querySelector('.element');
element.addEventListener('mouseenter', () => {
  element.classList.add('element-hover');
});
element.addEventListener('mouseleave', () => {
  element.classList.remove('element-hover');
});

使用 `onmouseover` 和 `onmouseout` 属性

直接在 HTML 元素上绑定事件：

<div 
  class="element" 
  onmouseover="this.style.backgroundColor='#f0f0f0'" 
  onmouseout="this.style.backgroundColor=''">
  Hover me
</div>

使用 CSS 变量和 JavaScript

通过 JavaScript 动态修改 CSS 变量实现 hover 效果：

.element {
  --hover-bg: #f0f0f0;
  --hover-color: #000;
}
.element:hover {
  background-color: var(--hover-bg);
  color: var(--hover-color);
}

const element = document.querySelector('.element');
element.style.setProperty('--hover-bg', '#f0f0f0');
element.style.setProperty('--hover-color', '#000');