自定义光标（如通过 #cursor 元素实现）会覆盖页面内容，拦截鼠标事件，导致 hover 等交互失效；只需为光标元素添加 pointer-events: none 即可透传鼠标事件，恢复所有悬停、点击等行为。
自定义光标（如通过 `#cursor` 元素实现）会覆盖页面内容，拦截鼠标事件，导致 hover 等交互失效；只需为光标元素添加 `pointer-events: none` 即可透传鼠标事件，恢复所有悬停、点击等行为。
在构建高定制化网站（如模仿 Sidecup Family Golf 的视觉风格）时，使用绝对定位的 DOM 元素模拟自定义光标是一种常见做法。但若未正确处理事件捕获逻辑，极易引发交互失灵——典型表现是：hover 效果延迟触发、仅在快速划过时偶然生效，或完全无响应。
根本原因在于：你的 #cursor 元素被设置为 position: fixed 且拥有极高的 z-index: 9999，它实质上像一层“透明玻璃”覆盖在整个视口之上。虽然视觉上它只是个圆形小点，但浏览器默认会将其视为可交互元素，从而拦截所有经过其区域的鼠标事件（包括 mouseenter、mouseleave、click），导致底层目标元素无法接收到 hover 信号。
✅ 正确解法非常简洁：在 CSS 中为 #cursor 添加 pointer-events: none：
#cursor {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #95c11e;
position: fixed;
z-index: 9999;
pointer-events: none; /* ? 关键修复：允许鼠标事件穿透 */
}
该声明告诉浏览器：“此元素不参与鼠标事件捕获”，光标将保持视觉可见性，同时完全不干扰底层任何交互逻辑——hover、focus、click、drag 等均恢复正常。
⚠️ 注意事项：
- 不要将 #cursor 设为 position: relative 或 absolute 来规避问题，这会导致滚动时位置偏移（正如你观察到的），违背“跟随鼠标”的核心需求；
- pointer-events: none 不影响子元素，若未来需在光标内添加可点击图标（如缩放态光标），可对子元素显式设置 pointer-events: auto；
- 确保 #cursor 元素本身无 tabindex 或 role 属性，避免意外引入键盘焦点干扰；
- 若使用 transform: translate() 替代 left/top 进行动画优化（推荐用于性能），仍需保留 pointer-events: none。
总结：自定义光标 ≠ 交互代理。它的唯一职责是视觉反馈，事件处理权必须交还给真实 DOM。一行 CSS，即可优雅解耦视觉与交互，让 hover 回归丝滑响应。
