自定义光标失效主因是路径错误、缺少fallback、协议限制或继承污染；需确保.cur文件路径正确、添加pointer回退、避免全局设置并用class切换状态。
直接用 cursor 属性就能改，但多数失效不是因为写错了，而是路径、fallback、继承或事件拦截没处理好。
为什么写了 cursor: url("hand.cur"), pointer; 却没反应
最常见原因是浏览器根本没加载到那个文件——不是报错，而是静默降级为 pointer。检查点有三个：
- 路径是否相对于 CSS 文件位置（不是 HTML）；
url("../img/hand.cur")才对，url("/img/hand.cur")很可能 404 - 是否漏了 fallback：
url("hand.cur")单独写 = 整条声明被 Safari / 旧 Chrome 忽略 - 本地开发用
file://协议？Chrome 会直接禁掉url()加载，必须起http://localhost服务验证
用 .cur 还是 .png 做自定义光标
.cur 是首选，尤其 Windows 场景下兼容性最稳，自带热点（hotspot），不用手动算坐标；.png 要求显式声明热区，比如 url("hand.png") 16 28, pointer;，否则默认取左上角 0 0，点哪都偏。
- Safari 对
.png支持极弱，15.4+ 才开始认url() x y语法，且只接受同源.cur - 尺寸别超 32×32px：Firefox 拒载大 PNG，Windows 系统本身也限制光标尺寸
- 别用 SVG：绝大多数浏览器不支持，Chrome 99+ 仅限无外部引用 + CORS 允许的极少数情况
如何确保光标只在目标元素生效，不污染子元素
cursor 会继承，所以给容器设了 url()，里面所有文字、按钮、链接都会跟着变——这通常不是你想要的。
- 显式重置关键子元素：
.custom-cursor button, .custom-cursor a { cursor: pointer; } - 或用通配重置：
.custom-cursor * { cursor: inherit; }，让子元素按自身语义决定光标 - 避免在
body或*上全局设cursor，否则表单控件、原生select下拉箭头都可能异常
动态切换光标时为什么鼠标移出就卡住
直接操作 document.body.style.cursor = "grabbing" 看似简单，但一旦鼠标快速移出窗口或触发 blur，样式就残留，再也切不回来。
- 改用 class 切换更可靠：
document.body.classList.add("is-grabbing")，配合 CSS.is-grabbing { cursor: grabbing; } - 监听
mouseup和mouseleave双事件，防止鼠标意外移出导致状态滞留 - 别依赖
:hover单独控制：键盘用户打 Tab 进入元素时不会触发hover，得补:focus-visible
真正难的不是写对那行 CSS，而是确认鼠标事件真落到了你写的那个元素上——pointer-events: none、伪元素遮罩、z-index 层叠、框架渲染延迟，任何一个都可能让 cursor 形同虚设。
