CSS cursor 属性支持 .cur、PNG、SVG 格式自定义光标，需正确使用 url() 语法并设置 fallback；注意尺寸限制、热点坐标、浏览器兼容性及优先级覆盖问题。
如何用 CSS 的 cursor 属性替换默认鼠标指针
直接改 cursor 就能换图标，但不是所有图片都能用——必须是尺寸小、格式支持、路径可访问的资源。浏览器只接受 .cur（Windows 原生光标格式）或 PNG/SVG（需配合 url() + 坐标偏移）。常见错误是丢掉 url() 里的括号，或漏写 fallback（比如 auto），导致整个样式失效。
-
cursor: url("pointer.cur"), auto;是最稳妥写法；.cur文件体积小、自带热区定义，无需额外坐标 - 用 PNG 时必须指定热点坐标，例如
cursor: url("hand.png") 4 4, pointer;，其中4 4表示点击点在图片左上角向右下各偏移 4px - SVG 作为
cursor源时，必须是内联 base64 或独立文件（不能是<svg>标签内嵌），且部分旧版 Safari 不支持 - 路径错误不会报错，只会静默回退到默认指针——建议打开开发者工具的 Network 面板确认
url()是否 200
为什么 cursor: url(...) 在某些元素上不生效
根本原因是 CSS 优先级和继承规则：如果父元素设置了 cursor: none 或更具体的 cursor 值，子元素没显式覆盖就会沿用；另外，<input type="text">、<textarea> 等表单控件会强制使用系统文本输入光标，CSS 无法覆盖。
- 检查 computed styles，确认最终生效的是哪条规则——常被
* { cursor: default !important }这类全局重置干掉 - 对按钮、链接等交互元素，确保没有 JavaScript 动态添加了
style.cursor内联样式（它优先级高于外部 CSS） - 移动端 Safari 完全忽略自定义
cursor，只认default、pointer、text等基础值，加了也白加
cursor 图片尺寸与性能影响
浏览器对自定义光标有硬性限制：Chrome/Edge 要求单边 ≤ 128px，Firefox ≤ 256px，超出直接降级为 fallback。大图不仅触发降级，还会增加首屏渲染阻塞——cursor 资源是同步加载的，不像普通图片可懒加载。
- 推荐尺寸：32×32 或 64×64 PNG，导出时关闭抗锯齿（减少边缘半透明像素，降低渲染开销）
- 避免使用带动画的 GIF 或 APNG——所有浏览器都不支持动画光标，只会显示第一帧
- 如果需要「悬停变手型+点击下沉」效果，别试图用多个
cursor切换，改用:hover+transform: scale(0.95)更可靠
调试时常见的错误提示和绕过方法
开发者工具里几乎看不到 cursor 加载失败的明确报错，只能靠排除法。最典型的现象是：代码写了，预览却还是箭头，且 Network 面板里找不到光标文件请求。
立即学习“前端免费学习笔记（深入）”；
- 复制
url()里的路径，粘贴到地址栏直接访问——404 就说明路径错，注意相对路径基于 HTML 文件位置，不是 CSS 文件位置 - 遇到
CORS问题（尤其本地 file:// 协议），把图片转成 data URL：cursor: url("data:image/png;base64,iVBOR..."), auto; - IE11 只支持
.cur，且要求 MIME 类型正确（服务器需返回application/octet-stream），否则静默失败
真正麻烦的是跨浏览器一致性——哪怕代码完全正确，Chrome 显示正常，Firefox 可能因 DPI 缩放把热点算偏，Safari 可能干脆不加载。实际项目里，除非品牌强需求，否则优先考虑用 SVG 图标 + pointer 文字提示代替视觉定制。
