pointer-events: none 仅禁用事件捕获与触发，不干预光标样式判断；浏览器仍依据最上层可交互元素的 cursor 值显示光标，导致自定义光标样式失效。
为什么 pointer-events: none 会让鼠标事件“穿透”但光标却没变？
因为 pointer-events: none 只禁用目标元素上的事件捕获和触发，不干涉浏览器对「当前悬停位置」的光标样式判断逻辑。浏览器仍会检查该坐标下**最上层可交互元素**（比如按钮、链接）的 cursor 值，而你的自定义光标元素被跳过了，所以它自己的 cursor: none 或其他设置根本不会生效。
真正隐藏原生光标并显示自定义图案的最小可行方案
必须同时满足两个条件：原生光标不可见 + 自定义元素在视觉上准确跟随且能响应 hover 状态。常见错误是只加 cursor: none 到 body，结果子元素 hover 时又冒出默认箭头或手型。
-
body和所有可能影响光标样式的元素（如a、button、input）统一设cursor: none - 自定义光标元素用
position: fixed（不是absolute），避免滚动偏移 - 用
requestAnimationFrame更新坐标，比mousemove直接赋值更平滑，尤其在高刷屏或低性能设备上 - 给自定义元素加
pointer-events: none—— 这步不能省，否则它会拦截点击，导致下方按钮点不动
document.addEventListener('mousemove', e => {
requestAnimationFrame(() => {
cursorEl.style.left = `${e.clientX}px`;
cursorEl.style.top = `${e.clientY}px`;
});
});
自定义光标在不同场景下的兼容性陷阱
移动端、iframe、表单控件、video 元素这些地方容易翻车，不是坐标错位就是光标突然复原。
- 移动端 Safari 不支持
cursor: none，得靠cursor: url(about:blank), auto模拟隐藏（部分 iOS 版本需配合touch-action: none） - 进入
iframe时，mousemove事件不会跨域冒泡，需在 iframe 内单独监听并通信 -
<input type="range">或video控件内部有独立光标逻辑，即使父容器设了cursor: none，拖动时仍可能闪出原生光标 - Windows 高对比模式下，自定义光标可能被系统强制替换为白底黑箭头，无法绕过
性能敏感点：别让光标拖慢页面响应
高频更新 left/top 属性会频繁触发重排（reflow），尤其当自定义光标含阴影、渐变或复杂 SVG 时，卡顿立刻出现。
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translate()替代left/top，走合成层，不触发布局 - 自定义光标元素必须设
will-change: transform（仅首次设一次，别在每帧里重复写） - 避免在光标元素上用
box-shadow或filter，它们在移动中消耗远高于纯色 SVG - 如果页面有大量动画或 canvas 渲染，考虑降级：仅在空闲时段（
requestIdleCallback）更新光标位置
最麻烦的其实是焦点管理——键盘 Tab 切换时，光标得自动回到默认状态，否则用户会困惑“为什么按回车没反应”。这个细节几乎没人提，但上线后必被 QA 打回来。
