如何解决绝对定位div实现的自定义光标导致链接hover事件失效的问题

问题的核心成因很直接：设置了高z-index的自定义光标占据了鼠标指针的命中位置，成为了鼠标事件的实际接收方，导致下方的链接元素收不到对应的悬停事件。

可落地的修复方案 #

• 方案1：给自定义光标添加鼠标事件穿透（首推最优解）
  给.custom-cursor添加CSS属性 pointer-events: none。这个属性会让光标层完全屏蔽所有鼠标类事件（悬停、点击、拖拽等），所有鼠标交互会直接穿透光标层，命中下方的真实元素，从根源上解决遮挡导致的事件失效问题。
  这个方案不需要修改原有交互逻辑，实现成本最低，还能保留光标层的高z-index定位，完全不会被页面其他元素遮挡，适配性拉满。
• 方案2：重构交互检测逻辑，绕开元素原生事件的遮挡影响
  放弃为每个链接单独绑定mouseenter/mouseleave事件，改为全局监听mouseover事件，通过事件参数判断当前鼠标悬停的元素是否为可交互类型（比如a标签、按钮等），再动态切换光标的hover样式。
  这个方案的优势是天然支持页面动态插入的可交互元素，不需要每次新增元素时重复绑定事件，哪怕光标层依然处于最高层级，也不会影响交互判断的准确性。
• 方案3：下调自定义光标的z-index层级（不推荐）
  将.custom-cursor的z-index设置为低于所有可交互元素的层级，让光标处于可交互元素的下方，从物理位置上避免遮挡。
  这个方案弊端非常明显：如果页面存在带不透明背景的卡片、弹窗等元素，光标会被这些元素遮挡，出现视觉断层，适配成本极高，仅适合所有页面元素全透明的特殊场景。

现有代码的隐藏bug #

写JS的时候不小心拼错了事件名：绑定事件时写的mousenter是错误拼写，正确的事件名是mouseenter，就算解决了遮挡问题，这个拼写错误也会导致事件完全无法触发，属于很容易踩的低级坑。

修正后的完整代码 #

修正后的SCSS #

.custom-cursor {
   width: 20px;
   height: 20px;
   border: 2px solid orange;
   position: absolute;
   /* 核心修复：让光标层不接收任何鼠标事件 */
   pointer-events: none;
   z-index: 1080;
   border-radius: 50%;
   transition-duration: 100ms;
   transition-timing-function: ease-out;
   box-shadow: 0 0 0 2px black;
   /* 补充初始定位值，避免页面滚动时光标位置偏移 */
   top: 0;
   left: 0;
   &.hover {
      width: 40px;
      height: 40px;
      background: rgba(#FFCC00,.5);
   }
}

修正后的Vanilla JS #

const cursor = document.querySelector('.custom-cursor');
// 自定义光标跟随系统光标的位置
document.addEventListener('mousemove', e => {
    cursor.style.top = `${e.pageY - 10}px`;
    cursor.style.left = `${e.pageX - 10}px`;
});
const links = document.querySelectorAll('a');
for(let link of links) {
    // 修正拼写错误：原mousenter改为正确的mouseenter
    link.addEventListener('mouseenter', () => {
        cursor.classList.add('hover');
    });
    link.addEventListener('mouseleave', () => {
        cursor.classList.remove('hover');
    });
}
// 可选优化：全局检测可交互元素悬停状态，支持动态新增的链接元素
/*
document.addEventListener('mouseover', e => {
    if (e.target.closest('a, button, [role="button"]')) {
        cursor.classList.add('hover');
    } else {
        cursor.classList.remove('hover');
    }
});
*/

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