页面滚动后元素Hover状态残留未消失问题如何解决

问题原因 #

这个是浏览器的默认交互逻辑：只有当物理移动鼠标时，浏览器才会重新计算元素的鼠标悬停状态。如果仅滚动页面、鼠标位置没有变化，哪怕元素已经和鼠标位置错开、甚至移出可视区域，浏览器也不会主动触发mouseleave/mouseout事件，CSS的:hover伪类也会持续生效。

解决方案 #

推荐放弃原生CSS:hover伪类，改用类名控制悬停样式，同时监听页面滚动事件手动校验悬停状态，具体实现如下：

CSS代码 #

.container {
  border: 1px solid black;
  height: 2000px;
}
.rect {
  border: 1px solid;
  height: 200px;
  width: 200px;
}
/* 用自定义类代替原生:hover */
.rect.hover {
  background-color: red;
}

HTML代码 #

<div class="container">
  <div class="rect"></div>
</div>

JavaScript代码 #

const rect = document.querySelector('.rect');
let mouseX = 0;
let mouseY = 0;

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

// 鼠标进入添加悬停类
rect.addEventListener('mouseenter', () => {
  rect.classList.add('hover');
})

// 鼠标离开移除悬停类
rect.addEventListener('mouseleave', () => {
  rect.classList.remove('hover');
  console.log('mouseleave');
})

// 滚动时校验悬停状态
window.addEventListener('scroll', checkHover);

function checkHover() {
  const rectInfo = rect.getBoundingClientRect();
  // 判断鼠标是否在元素坐标范围内
  const isHover = mouseX >= rectInfo.left && mouseX <= rectInfo.right 
                && mouseY >= rectInfo.top && mouseY <= rectInfo.bottom;
  if (!isHover && rect.classList.contains('hover')) {
    rect.classList.remove('hover');
    console.log('mouseleave (scroll trigger)');
    // 此处可写入原本mouseleave事件要执行的业务逻辑
  }
}

如果页面滚动触发频率过高，可给checkHover函数加节流优化，减少性能消耗。

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