自定义光标（如通过 #cursor 元素实现）会覆盖页面内容，拦截鼠标事件，导致 hover 等交互失效；只需为光标元素添加 pointer-events: none 即可透传鼠标事件，同时保持视觉效果和滚动跟随能力。
自定义光标（如通过 `#cursor` 元素实现）会覆盖页面内容，拦截鼠标事件，导致 hover 等交互失效；只需为光标元素添加 `pointer-events: none` 即可透传鼠标事件，同时保持视觉效果和滚动跟随能力。
在构建高保真网站克隆（如 Sidecup Family Golf）时，使用绝对定位的 DOM 元素模拟自定义光标是一种常见做法。但若未正确处理事件穿透，会导致一个典型问题：所有 hover、click、focus 等鼠标交互失效——尤其在快速移动光标时偶现、缓慢移动时无响应，这正是光标元素“遮挡”了底层目标元素的明确信号。
根本原因在于：你的 #cursor 元素被设置为 position: fixed 且 z-index: 9999，它始终位于最上层，浏览器将所有鼠标事件（包括 mouseenter、mouseleave）优先派发给它，而不会向下冒泡或透传至其下方的真实可交互元素（如按钮、导航项等）。
✅ 正确解法是启用事件穿透：
只需在 CSS 中为 #cursor 添加一行关键声明：
#cursor {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #95c11e;
position: fixed;
z-index: 9999;
pointer-events: none; /* ? 核心修复：允许鼠标事件穿透该元素 */
}
pointer-events: none 告诉浏览器：此元素不参与任何鼠标事件捕获与响应，鼠标行为将直接作用于其下方的 DOM 节点。此时：
- hover 效果立即恢复正常（无需降级为 position: relative）；
- 光标仍能精准跟随 mousemove 实时定位；
- 滚动时位置不受影响（因 fixed 定位天然相对于视口，不会随文档流偏移）；
- 所有交互逻辑（如 :hover, :active, JavaScript 事件监听）均按预期工作。
⚠️ 注意事项：
- 不要对 #cursor 添加 pointer-events: auto 或移除该属性，否则问题复现；
- 避免为其绑定任何鼠标事件监听器（如 crsr.addEventListener('click', ...)），否则会再次中断透传；
- 若需在光标上叠加「悬停态放大」或「点击反馈」等视觉效果，应通过监听目标元素的事件后动态修改 #cursor 的 class 或 style 实现，而非直接操作其事件。
至此，你既保留了精致的自定义光标体验，又完全恢复了页面的原生交互能力——专业前端实现的关键，往往就藏在这一行 pointer-events: none 之中。
