HTML5中无法直接用CSS设置图片光标，需通过cursor: url()实现，但仅支持.cur格式、需设热点与回退关键词，且移动端无效。
HTML5中不能直接用CSS设置图片光标
HTML5本身没有新增光标相关语法，cursor 属性仍沿用CSS2.1规范。所谓“HTML5设置图片光标”，实际是通过CSS的 cursor: url(...) 实现，但浏览器支持和行为有明显限制。
使用 cursor: url() 加载自定义光标图片
这是唯一可行方式，但必须注意格式、尺寸和回退机制：
- 图片格式仅推荐
.cur（Windows原生光标格式），部分浏览器支持.png，但 Safari 完全不支持 PNG 光标 - 推荐尺寸为
32×32像素；超过128×128在 Chrome/Firefox 中会被缩放或拒绝加载 -
必须提供 fallback：
cursor: url("hand.cur"), pointer;—— 逗号后必须跟一个标准关键词，否则整个声明失效 - 路径需相对或绝对有效；
url()不支持跨域资源（会静默失败）
button {
cursor: url("assets/click.cur"), pointer;
}
常见失效原因和调试方法
光标不显示？大概率是以下某个环节出问题：
- 控制台报错
Failed to load resource: net::ERR_FAILED→ 检查url()路径是否 404 或跨域 - 光标显示为系统默认箭头 → 回退关键词缺失，或
.cur文件损坏（可用 Windows 自带pinocchio.exe验证） - Chrome 中光标偏移 → 未在
.cur中指定热点（hotspot），需用专业工具（如 RealWorld Cursor Editor）设置 X/Y 坐标 - Firefox 仅支持
.cur，且要求文件含完整头部信息（不能用 PNG 重命名成 .cur）
移动端和现代框架中的替代思路
iOS / Android 完全忽略 cursor: url()，且触摸设备无“光标”概念。若目标是提升交互反馈，应转向：
- 用
:active伪类缩放/变色元素：button:active { transform: scale(0.96); } - 在 React/Vue 中监听
touchstart/mousedown动态加 class - 避免强依赖视觉光标——尤其对无障碍访问而言，屏幕阅读器不感知 cursor 变化
真正需要自定义光标的场景极少，多数时候是设计过度。优先用语义化 HTML + 标准 cursor 关键词（pointer、grab、move）更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
