cursor属性写在哪？style里直接用就行
直接在元素的 style 属性里写 cursor 是最常用也最稳妥的方式，不需要额外 CSS 类或外部文件。浏览器对它的支持从 IE6 就开始，现代所有环境都无兼容性问题。
常见错误是把路径写错，尤其是自定义图标时——路径必须相对于 HTML 文件（不是 CSS 文件），且必须带格式后缀；漏掉后缀或路径错位，cursor 会静默降级为默认箭头，不报错也不提示。
- 正确写法：
style="cursor: url('pointer.cur'), auto;" - 错误写法：
style="cursor: url('pointer');"（缺后缀） - 错误写法：
style="cursor: url('/assets/pointer.cur'), auto;"（路径相对于当前 HTML，不是服务器根目录，除非 HTML 在根目录下）
自定义光标文件选 .cur 还是 .png？
.cur 是 Windows 原生光标格式，自带热点（hotspot）坐标，浏览器识别最稳；.png 虽然能用，但必须显式指定热点，否则默认取左上角（0, 0），导致点击位置和鼠标视觉中心严重偏移。
使用场景上：如果只支持桌面端、且需要精准点击（比如画布工具、拖拽句柄），优先用 .cur；若要透明度高、设计复杂，又得兼顾 Safari（它对 .cur 支持弱），可备一份 .png + 热点声明，但注意 Safari 15.4+ 才支持 url(...), x y, fallback 的完整语法。
立即学习“前端免费学习笔记（深入）”；
-
.cur示例：cursor: url('hand.cur'), pointer; -
.png示例：cursor: url('hand.png') 4 4, pointer;（4 4 是热点 x/y 像素偏移） - Safari 旧版可能直接忽略
.png行，所以 fallback（逗号后的pointer）不能省
为什么加了 cursor 却没变？常见失效原因
最常被忽略的是父级元素的 pointer-events: none 或子元素的 z-index 层叠覆盖——cursor 只作用于“实际接收鼠标事件”的元素，哪怕样式生效了，事件被拦在上面一层，光标也不会变。
另一个隐形坑是伪元素（如 ::before）设置了大尺寸遮罩但没设 pointer-events: none，它会拦截鼠标，导致下层元素的 cursor 完全无效。
- 检查是否被
pointer-events: none阻断（包括父级、兄弟级、伪元素） - 用浏览器开发者工具的“盒子模型”叠加层确认鼠标落在哪个元素上
- 动态插入的元素（如 Vue/React 渲染后）需确保
style或 class 已真实挂载，别在 DOM 还没更新时就查
性能与限制：别用太大的光标图
浏览器加载自定义光标是同步阻塞的，尤其在移动端或弱网下，大尺寸 PNG（比如 128×128）可能导致首次悬停明显延迟，甚至卡顿。Chrome 对单个光标文件大小没硬限制，但实测超过 4KB 就容易出现加载滞后。
另外，CSS 中不能用 CSS 变量动态切换 cursor 值（cursor: var(--my-cursor) 不生效），也不能用 @media 查询做响应式光标切换——这些都得靠 JS 切换 class 或重写 style。
- 推荐尺寸：24×24 或 32×32 像素，.cur 格式一般
- 避免在
:hover里用url()动态加载，它不会缓存，每次 hover 都重新请求 - 想换光标？改 class 比直接操作
style.cursor更可控，也方便配合 transition（虽然 cursor 本身不支持过渡动画）
cursor，而是排查谁悄悄吃了你的鼠标事件，或者在 Safari 里发现 PNG 光标偏了 8 像素却死活找不到热点设置在哪。 
