自定义光标需明确尺寸与热点坐标，如cursor: url("hand.png") 4 4, auto；.cur文件虽自带热点但常失效，PNG更可控；注意浏览器尺寸限制（Chrome≤128px，Firefox≤64px）及表单元素覆盖问题。
用 cursor: url() 加自定义光标要配尺寸和热点
直接写 cursor: url("arrow.cur") 很可能失效——浏览器要求 .cur 或 .png 光标文件必须带明确尺寸，且热点（hotspot）坐标需在 CSS 中声明。否则 Chrome/Firefox 会静默降级为默认箭头。
- .cur 文件自带热点信息，但多数在线生成的 .cur 实际没正确写入，建议用 cursor.cc 导出时勾选「Set hotspot」并手动点选左上角像素
- 用 PNG 替代更可控：必须加尺寸声明，例如
cursor: url("hand.png") 4 4, auto，其中4 4表示热点在图片左上起第 4px×4px 处（X Y 坐标） - 尺寸超限会直接被忽略：Chrome 要求单边 ≤ 128px，Firefox ≤ 64px；超出就 fallback 到
auto
全局设置 vs 局部覆盖：优先级和继承陷阱
body { cursor: url("dot.png") 0 0, default } 看似能统一整页光标，但表单控件（、）、链接（）、可编辑区域会用自己的 cursor 值强行覆盖，导致“只在空白处生效”。
- 想让所有元素服从统一光标，得显式重置：用
* { cursor: url("dot.png") 0 0, default !important }（注意!important不可少） - 但
和contenteditable区域输入时，系统仍可能强制显示 I-beam，此时需额外加textarea:hover, textarea:focus { cursor: url("text.png") 2 12, text } - 按钮悬停态（
button:hover）默认是pointer，若想保留自定义光标，必须单独写 hover 规则，不能只靠 body 继承
兼容性细节：.cur / .png / SVG 的实际支持差异
别信“SVG 光标很酷”的教程——目前只有 Firefox 原生支持 url("icon.svg")，Chrome 和 Safari 完全不识别，连报错都不会有。
- .cur 是最稳选择：Windows 原生格式，所有主流浏览器都支持，但制作麻烦，且无法用 CSS 动态换色
- PNG 最实用：透明背景 + 小尺寸（如 32×32），配合
cursor: url("x.png") 16 16, pointer，fallback 到pointer也合理 - 避免 Base64 内联：虽然语法合法（
cursor: url("data:image/png;base64,...") 0 0, auto），但 Safari 会拒绝加载，且增大 CSS 体积，无缓存优势
调试光标不生效的三步检查法
光标没变？不是代码写错，大概率是路径、尺寸或层级问题。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements 面板，选中目标元素，看 Computed 标签页里
cursor值是否显示你写的url(...)—— 如果显示default或auto，说明规则被覆盖或解析失败 - 右键检查光标文件路径：在 Network 标签页过滤
cursor或文件名，确认返回 200 且 Content-Type 是image/x-icon（.cur）或image/png（PNG） - 临时加
outline: 1px solid red到 body，确认鼠标确实在目标区域内，排除因pointer-events: none或父层遮挡导致的“看似没反应”
自定义光标真正难的不是写那行 CSS，而是每个浏览器对尺寸、格式、热点坐标的容忍度不同，且很容易被用户代理样式无声覆盖。动手前先测一个 32×32 PNG + 明确 0 0 热点，比调一堆炫酷但不可靠的方案更省时间。
