跟随鼠标的Div悬浮特定盒子时出现严重闪烁问题求助

这种闪烁问题我之前也遇到过，核心原因其实是鼠标事件的触发冲突——你的跟随Div（#boxshadow）出现在目标盒子上方后，会“抢走”鼠标的hover状态：目标盒子失去hover导致Div隐藏，Div一隐藏目标盒子又重新获得hover，Div再次显示，如此循环就造成了肉眼可见的闪烁。这确实和层级（z-index）有关，但更关键的是要避免跟随Div干扰目标盒子的鼠标交互。

下面是具体的解决方案，按步骤来就能搞定：

1. 给跟随Div添加pointer-events: none #

这是最关键的一步，它会让#boxshadow完全忽略所有鼠标事件，鼠标的hover、点击等操作会直接“穿透”它作用在下方的目标盒子上，从根源上切断冲突循环。

在CSS里添加这段样式：

#boxshadow {
  pointer-events: none;
  /* 保留你已有的其他样式，比如position: fixed、width/height等 */
}

2. 优化目标盒子的hover逻辑 #

确保你的目标盒子hover样式是直接绑定在盒子本身上，避免依赖父元素或其他间接触发逻辑，比如：

.target-box:hover {
  background-color: white; /* 你提到的悬浮变白效果 */
  /* 其他hover样式 */
}

3. 调整鼠标跟随的事件绑定逻辑 #

建议只在目标盒子的mouseenter事件中启用跟随Div的显示和鼠标监听，在mouseleave时关闭，这样既节省性能，也能避免不必要的交互冲突：

// 提前获取元素
const shadowBox = document.getElementById('boxshadow');
const targetBoxes = document.querySelectorAll('.target-box');

// 鼠标移动时更新跟随位置的函数
function updateShadowPosition(ev) {
  // 可以给鼠标加个偏移量，避免Div完全盖住鼠标指针
  const offsetX = 12;
  const offsetY = 12;
  shadowBox.style.transform = `translate(${ev.clientX + offsetX}px, ${ev.clientY + offsetY}px)`;
}

// 给每个目标盒子绑定事件
targetBoxes.forEach(box => {
  box.addEventListener('mouseenter', () => {
    // 加载当前盒子对应的HTML内容，这里假设用data-content属性存储内容
    shadowBox.innerHTML = box.dataset.content;
    // 显示跟随Div
    shadowBox.style.display = 'block';
    // 绑定鼠标移动事件
    document.addEventListener('mousemove', updateShadowPosition);
  });

  box.addEventListener('mouseleave', () => {
    // 隐藏跟随Div
    shadowBox.style.display = 'none';
    // 移除鼠标移动事件，避免无用计算
    document.removeEventListener('mousemove', updateShadowPosition);
  });
});

4. 确认z-index层级设置 #

确保跟随Div的z-index比目标盒子高，这样它能正常显示在目标盒子上方，但因为已经加了pointer-events: none，不会干扰目标盒子的hover：

.target-box {
  position: relative;
  z-index: 1; /* 基础层级 */
}

#boxshadow {
  position: fixed; /* 或者absolute，根据你的布局调整 */
  z-index: 10; /* 比目标盒子高，确保显示在上方 */
  pointer-events: none;
}

按照上面的步骤调整后，闪烁问题应该就能彻底解决了——核心就是用pointer-events: none让跟随Div只做视觉展示，不参与鼠标交互，同时优化事件绑定逻辑减少不必要的触发。

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