最可靠方式是 cursor: url() + 备用值；.cur 比 .png 更稳，因支持 hotspot 且兼容性更好；file:// 协议下 chrome 静默拦截，需本地服务预览。
直接说结论：用 cursor: url() + 备用值是最可靠的方式，但本地开发时 file:// 协议下 Chrome 会静默拦截，必须起本地服务才能预览；.cur 比 .png 更稳，因为支持 hotspot 定义，且兼容性更好。
为什么 cursor: url('xxx.png') 不生效？
最常见原因不是写错了，而是浏览器根本没加载到文件：
- Chrome 在
file://协议下禁止url()加载本地资源（无报错，只在 DevTools 的 Network 面板里显示 “blocked”） - 路径写错或大小写不一致（比如
Cursor.png写成cursor.PNG，Linux/macOS 服务器会 404） - 没提供 fallback 值（
cursor是“逗号分隔的候选列表”，浏览器跳过所有失败项后，必须有一个兜底的系统值） - 图片尺寸超过 128×128px，部分浏览器（尤其是旧版 Safari）直接忽略
.cur 和 .png 选哪个？
优先用 .cur，尤其要精确控制点击位置时：
-
.cur文件内建 hotspot（热区），能定义鼠标“点击点”在图标内的坐标，比如箭头尖端；.png不支持，浏览器默认取左上角(0, 0)，容易偏移 - IE 只认
.cur；现代浏览器都支持，但 Safari 对.png的 hotspot 参数（如url('c.png') 4 12）支持不稳定 - 生成
.cur很简单：在线工具（如 convertio.co、icoconvert.com）上传 PNG → 下载为 .cur，确保导出时勾选“设置 hotspot”并定位到你想要的点击点
怎么写才不会被 CSS 优先级或交互逻辑覆盖？
光标样式容易“突然失效”，往往不是 cursor 写得不对，而是被其他规则或属性压制了：
- 检查是否父元素或自身设置了
pointer-events: none—— 这会让光标退回到default，且不触发任何 hover/focus 效果 - 确认 computed styles 中生效的是你写的那条，不是某个全局重置规则（比如
* { cursor: default !important; }） - 伪元素（
::before/::after）上设了cursor，但伪元素本身没有实际渲染区域（比如没设content或width/height），悬停时根本“碰不到”它 - 动态添加类时，别只加 class，记得同时移除冲突类（比如拖拽中加
is-grabbing，结束时要el.classList.remove('is-grabbing')，否则样式残留）
JavaScript 动态切换光标要注意什么？
用 JS 控制 style.cursor 看似简单，但有隐性陷阱：
- 不要直接写
el.style.cursor = 'url(x.cur)'—— 这会丢掉 fallback，应写成el.style.cursor = "url('x.cur'), pointer" - 批量操作时，避免高频修改（比如
mousemove里反复设），改用 class 切换更稳定 - 拖放场景下，
grab/grabbing不是万能解：Safari 15.6 之前不支持grabbing，回退到default，建议始终配 fallback：cursor: grabbing, grab, pointer - 如果整个页面要隐藏光标（比如做全屏互动），用
body { cursor: none; }，但务必搭配一个绝对定位的自定义指针元素（div.pointer），否则用户会彻底“看不见自己在哪点”
真正麻烦的从来不是怎么写那行 cursor: url()，而是 hotspot 坐标算不准、本地协议被拦、fallback 没写全、或者被 pointer-events 悄悄关掉了——这些点漏一个，光标就“消失”得毫无征兆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
