cursor属性支持的自定义值为url()函数指定的图像路径（如.cur、.png），须配合fallback关键词（如pointer、default），并可选设热区坐标，例如cursor: url("hand.cur"), pointer;或cursor: url("icon.png") 4 12, move;。
cursor属性支持哪些自定义值
HTML 中的 cursor 属性本身不直接加载图片，但支持通过 url() 函数指定自定义光标图像，前提是配合一个备选关键词（fallback）。浏览器必须能解析该 URL，且图像尺寸建议 ≤ 128×128px（Windows/Linux 限制更严，常见上限为 32×32px 或 64×64px），超出可能静默降级为默认箭头。
常用 fallback 关键词包括：auto、pointer、default、move 等；不能省略，否则整个声明无效。
-
cursor: url("hand.cur"), pointer;—— 正确：.cur 文件原生支持热区（hotspot），推荐用于 Windows 场景 -
cursor: url("icon.png") 4 12, move;—— 正确：PNG 需手动指定热区坐标（x y），单位为像素，从左上角起算 -
cursor: url("bad.svg"), auto;—— 可能失败：多数浏览器不支持 SVG 作为 cursor（Chrome 99+ 开始有限支持，但需 CORS 允许且无外部引用）
为什么本地开发时自定义光标不显示
最常见原因是浏览器安全策略阻止了 file:// 协议下的 url() 加载。即使路径正确、图片存在，控制台也可能无报错，光标直接回退到 fallback 值。
验证方式：打开开发者工具 → Elements 面板 → 检查元素 computed 样式中 cursor 是否显示为 url(...), ...；若显示为 fallback 值（如 pointer），说明 url() 加载失败。
立即学习“前端免费学习笔记（深入）”；
- 用
http-server、live-server或 VS Code 的 Live Server 插件起本地服务，让页面走http://localhost - 确保图片路径相对于 CSS 文件位置（不是 HTML）；例如 CSS 在
/css/style.css，图片写url("../img/cursor.cur") - 避免使用绝对路径如
url("/img/cursor.cur")除非确认服务器根目录映射正确
如何在不同浏览器中保持兼容性
IE 支持 .cur 最好，Chrome/Firefox 对 PNG 支持稳定但要求热区明确，Safari 对自定义 cursor 支持较弱（特别是 macOS 上常忽略热区或强制缩放）。实际项目中建议分层提供：
- 优先提供
.cur（Windows 友好）+ PNG（跨平台兜底）：cursor: url("arrow.cur"), url("arrow.png") 0 0, default; - 热区坐标必须与设计意图一致：比如手型图标希望点击点在指尖，就设
url("hand.png") 16 28, pointer; - 不要依赖动画光标（如 APNG/GIF）：所有主流浏览器均不支持 cursor 动画，只会取第一帧
- 移动端 Safari 和 Android Chrome 完全忽略
cursor声明（触摸设备无 hover 概念），无需适配
使用 JavaScript 动态切换 cursor 的注意事项
通过 JS 设置 style.cursor 与 CSS 声明规则一致，但要注意 DOM 更新时机和作用域范围。常见误操作是直接改 body.style.cursor 却未清除，导致全局光标残留。
- 推荐绑定到具体交互容器，而非全局：
button.addEventListener('mouseenter', () => btn.style.cursor = 'url("click.cur") 5 5, pointer'); - 务必配套
mouseleave清理，否则光标状态会卡住：btn.style.cursor = '';（设为空字符串可恢复 CSS 级联值） - 避免高频触发：如
mousemove中反复设置cursor会引发重绘抖动，应做节流或仅在进入/离开区域时切换 - 检测是否生效？可在 DevTools Console 执行
getComputedStyle(document.body).cursor查看当前计算值
