解决滚动时鼠标静止在元素上无法触发hover效果的问题

这个问题确实挺典型的——CSS的:hover伪类只有在鼠标移动进入元素边界时才会触发，当你滚动页面时，如果鼠标保持不动，哪怕元素滚到鼠标下方，浏览器也不会自动检测并触发hover状态。咱们可以用JavaScript配合CSS来解决这个问题，下面是具体的实现方案：

第一步：重构CSS样式 #

先把原来依赖:hover的样式改成通过类来控制，这样我们可以用JS手动切换状态：

.nav-bar {
  position: relative; /* 必须添加，让absolute子元素相对于它定位 */
  .nav-wrapper-overlay {
    position: absolute;
    background: rgba(255, 255, 255, 1);
    opacity: 0.4;
    transition: all 0.6s ease-out;
    inset: 0; /* 让overlay铺满整个nav-bar，替代top/right/bottom/left */
  }
  /* 用类替代:hover伪类 */
  &.is-hovered .nav-wrapper-overlay {
    opacity: 0;
  }
}

这里补充了position: relative给.nav-bar，并使用inset: 0让覆盖层自动铺满父元素，避免手动设置四个方向的定位。

第二步：添加JavaScript逻辑 #

我们需要实时跟踪鼠标位置，并在滚动时检查鼠标是否落在.nav-bar元素范围内，然后动态切换类：

// 存储当前鼠标坐标
let mouseX = 0;
let mouseY = 0;

// 监听鼠标移动，更新坐标
document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// 获取目标导航元素
const navBar = document.querySelector('.nav-bar');

// 判断鼠标是否在元素范围内的工具函数
function isMouseOverElement(element) {
  if (!element) return false;
  const rect = element.getBoundingClientRect();
  // 检查鼠标坐标是否在元素的视口范围内
  return (
    mouseX >= rect.left &&
    mouseX <= rect.right &&
    mouseY >= rect.top &&
    mouseY <= rect.bottom
  );
}

// 滚动事件处理（加防抖优化性能）
function handleScroll() {
  if (isMouseOverElement(navBar)) {
    navBar.classList.add('is-hovered');
  } else {
    navBar.classList.remove('is-hovered');
  }
}

// 防抖函数，避免滚动时频繁触发
function debounce(func, delay = 50) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 绑定滚动事件（带防抖）
window.addEventListener('scroll', debounce(handleScroll));

// 保留原生鼠标hover的行为
navBar.addEventListener('mouseenter', () => {
  navBar.classList.add('is-hovered');
});

navBar.addEventListener('mouseleave', () => {
  navBar.classList.remove('is-hovered');
});

工作原理说明 #

1. 跟踪鼠标位置：通过mousemove事件实时记录鼠标在视口中的坐标，确保滚动时我们知道鼠标在哪里。
2. 滚动时检测元素位置：每次滚动（经过防抖优化），用getBoundingClientRect()获取.nav-bar相对于视口的位置，判断鼠标是否在元素范围内。
3. 切换类触发样式：如果鼠标在元素上，添加is-hovered类触发透明度变化；否则移除类恢复初始状态。
4. 兼容原生hover：保留mouseenter和mouseleave事件，确保正常鼠标移动时的hover行为不受影响。

这样修改后，不管是滚动时元素滚到鼠标下方，还是鼠标主动移动到元素上，都能正确触发你想要的透明度过渡效果了。

内容的提问来源于stack exchange，提问作者Igor-Vuk