Svelte中如何不使用CSS :hover实现鼠标悬停时添加类？

不用在CSS里写:hover选择器，直接靠JS监听鼠标事件动态加/删带动画的类就行，这样CSS只需要维护动画类的样式，代码更简洁好维护。

完整实现代码 #

CSS 定义动画和类 #

/* 定义缩放动画 */
@keyframes scaleUp {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

/* 触发动画的类 */
.hover-animate {
  animation: scaleUp 0.3s forwards;
}

/* 元素基础样式 */
.target-box {
  width: 150px;
  height: 150px;
  background: #42b983;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

HTML 目标元素 #

<div class="target-box">悬停看看效果</div>

JS 动态操作类 #

const box = document.querySelector('.target-box');

// 鼠标移入时加动画类
box.addEventListener('mouseenter', () => {
  box.classList.add('hover-animate');
});

// 鼠标移出时删动画类，同时重置动画状态
box.addEventListener('mouseleave', () => {
  box.classList.remove('hover-animate');
  // 强制重绘，确保下次悬停动画能重新触发
  void box.offsetWidth;
});

补充说明 #

• 加void box.offsetWidth是因为移除类后，浏览器可能不会重置动画状态，下次加类时动画不生效，这行代码能强制浏览器重绘元素，解决这个问题。
• 如果有多个元素需要这个效果，用事件委托更高效，不用挨个绑定事件：

// 事件委托写法
document.addEventListener('mouseenter', (e) => {
  if (e.target.matches('.target-box')) {
    e.target.classList.add('hover-animate');
  }
});

document.addEventListener('mouseleave', (e) => {
  if (e.target.matches('.target-box')) {
    e.target.classList.remove('hover-animate');
    void e.target.offsetWidth;
  }
});

内容的提问来源于stack exchange，提问作者Eli O.