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