如何判断鼠标停止悬停元素？JS/CSS实现悬停与离开动画方法

方法一：纯CSS实现（推荐） #

用CSS的:hover伪类配合transition属性，就能轻松实现悬停变色和离开时的反向动画，无需JS介入。

核心思路：给元素设置初始背景色，通过transition指定过渡的属性和时长，再用:hover定义悬停时的背景色，浏览器会自动处理悬停和离开时的平滑过渡。

示例代码：

.hover-element {
  /* 初始样式 */
  width: 200px;
  height: 100px;
  background-color: #ffffff;
  /* 指定过渡效果：针对background-color，时长0.3秒 */
  transition: background-color 0.3s ease;
}

.hover-element:hover {
  /* 悬停时的背景色 */
  background-color: #42b983;
}

鼠标悬停时，元素会从白色平滑过渡到绿色；鼠标离开时，又会从绿色切回白色，全程自动完成动画。

方法二：JavaScript实现（适合复杂逻辑） #

如果需要在鼠标离开时执行额外逻辑（比如触发其他函数），可以用mouseenter和mouseleave事件监听状态变化，配合CSS过渡或JS动画实现效果。

方式1：通过添加/移除CSS类 #

先定义好初始和悬停的CSS类，用JS监听事件切换类：

.hover-element {
  width: 200px;
  height: 100px;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

.hover-element.active {
  background-color: #42b983;
}

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

// 鼠标进入时添加类
element.addEventListener('mouseenter', () => {
  element.classList.add('active');
});

// 鼠标离开时移除类
element.addEventListener('mouseleave', () => {
  element.classList.remove('active');
});

方式2：直接修改样式（耦合性高，不推荐） #

如果不想用CSS类，也可以直接在事件回调里修改元素样式：

const element = document.querySelector('.hover-element');
const originalColor = '#ffffff';
const hoverColor = '#42b983';

element.style.transition = 'background-color 0.3s ease';

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

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

注意事项 #

• 优先用纯CSS方案，代码更简洁、性能更好
• JS里尽量用mouseenter/mouseleave而非mouseover/mouseout，后者会冒泡到子元素，导致不必要的触发
• 过渡时长和缓动函数（ease/linear等）可根据需求调整

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