CSS :hover 需滚动停止/鼠标移动才触发？如何实现即时触发？

问题根源 #

滚动动画执行期间，浏览器为了保障滚动流畅度，会临时推迟鼠标悬停事件的检测，直到滚动结束或鼠标产生新的位移——这是浏览器性能优化机制导致的副作用。

可行解决方案 #

1. 禁用平滑滚动（最直接） #

如果页面或滚动容器设置了scroll-behavior: smooth，将其改为auto，滚动会瞬间完成，hover事件就能即时响应：

/* 全局禁用平滑滚动 */
html {
  scroll-behavior: auto;
}

/* 或仅针对特定滚动容器 */
.scroll-container {
  scroll-behavior: auto;
}

2. JS手动控制hover状态（保留平滑滚动的最优解） #

通过监听鼠标位置和滚动事件，实时判断鼠标是否在目标元素上，手动切换hover样式类：

// 记录鼠标实时坐标
let mouseX = 0;
let mouseY = 0;
document.addEventListener('mousemove', e => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// 选中所有需要hover效果的元素
const hoverTargets = document.querySelectorAll('.hover-target');

// 滚动时实时检测并更新状态
window.addEventListener('scroll', () => {
  hoverTargets.forEach(el => {
    const rect = el.getBoundingClientRect();
    const isHovering = mouseX >= rect.left && mouseX <= rect.right &&
                       mouseY >= rect.top && mouseY <= rect.bottom;
    
    el.classList.toggle('hover-active', isHovering);
  });
});

然后修改CSS，把hover样式绑定到自定义类：

.hover-target:hover, .hover-target.hover-active {
  /* 你的hover样式示例 */
  background: #f0f0f0;
  transform: translateY(-2px);
}

3. 分离点击区域与动画元素（适配transform动画场景） #

如果滚动时用transform移动元素，浏览器的鼠标命中检测可能和视觉位置不同步。可以添加一个透明伪元素作为固定命中区域，让它始终接收鼠标事件：

.hover-target {
  position: relative;
}

/* 透明命中区域，不参与动画 */
.hover-target::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 1;
  background: transparent;
}

/* 仅让元素内容执行滚动动画 */
.hover-target .content {
  transition: transform 0.3s ease;
}

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