cursor url() 中的路径相对于当前 CSS 文件所在目录，而非 HTML 页面；常见错误包括误用 HTML 相对路径、本地 file:// 协议下被浏览器拒绝、MIME 类型配置不当、漏写文件后缀，.cur 格式兼容性最佳，SVG 光标需注意热点设置与浏览器支持限制。
cursor url() 中的路径到底相对谁？
路径是相对于当前 CSS 文件位置，不是 HTML 页面。如果你在 styles.css 里写 cursor: url('icons/hand.cur'), pointer;，浏览器会从 styles.css 所在目录往下找 icons/hand.cur。很多人误写成相对于 HTML 的路径（比如 /assets/cursor.cur），结果 404 且静默回退为箭头——不报错、不警告。
常见错误包括：
- 用
file://协议本地打开 HTML：Chrome/Firefox 直接拒绝加载url()，控制台报Not allowed to load local resource - 开发服务器没配好 MIME 类型：
.cur应返回application/octet-stream，.svg要是image/svg+xml，否则 Firefox 可能拒载 - 漏写后缀：
url('hand')无效，必须是url('hand.cur')或url('hand.svg')
SVG 光标和 .cur 文件哪个更稳？
.cur 是最兼容的选择：Windows 原生格式，自带热点坐标，IE6+、所有现代浏览器都认，无需额外声明。但设计受限，不支持渐变或复杂动画。
.svg 看似灵活，实际坑多：
立即学习“前端免费学习笔记（深入）”；
- Firefox 支持外部引用的 SVG 光标，但要求 SVG 内不能含
<image></image>、<use></use>或外部href，否则加载失败 - Safari 对
url()+ SVG 的支持直到 15.4 才完整，旧版直接跳过整条声明 - 必须显式设热点：
cursor: url('icon.svg') 8 8, pointer;，否则默认 (0, 0) 导致点击偏移 - 别指望 inline SVG data URL：Firefox 不支持，Chrome 会解析但可能丢样式
为什么加了 cursor 却没变？检查这三处
光标不生效，90% 不是 cursor 写错了，而是被别的规则“挡住”了：
-
pointer-events: none在父级、兄弟层、甚至::before/::after伪元素上——只要鼠标事件没落到目标元素上，cursor就不会触发 - z-index 层叠覆盖：上面一层透明但
pointer-events: auto的 div 把鼠标“吃掉”了 - 动态渲染框架（React/Vue）中，DOM 还没挂载完成就设置了
style.cursor，或者状态更新延迟导致 class 没及时切过去
用 DevTools 的“Toggle element hover state”或直接在控制台执行 document.elementFromPoint(x, y)，确认鼠标真正落在哪个节点上。
移动端和高 DPI 屏幕的现实约束
iOS 和 Android 浏览器基本忽略所有 url() 和大多数关键字（text 在输入框内除外）。别为移动端写 cursor: pointer 并期待它显示——它不会，也不该。
高 DPI 屏（如 MacBook Retina）下：
-
.cur文件若只提供 16×16，会被拉伸模糊；建议同时提供 32×32 版本并用@media (-webkit-min-device-pixel-ratio: 2)切换 -
.png光标必须带 alpha 通道，否则白底图标在深色模式下看不见 - 别对
zoom-in/zoom-out做强依赖：Chrome 98+ 才支持，旧版本直接 fallback 到default
最易被忽略的一点：自定义光标没有语义，屏幕阅读器完全感知不到。如果靠手型暗示“可点击”，必须同步加 aria-label 或视觉文本提示。
