cursor: url() 经常不生效，主因是路径404或跨域、未写fallback关键字、图片超尺寸限制（chrome 128×128px）、未指定热点坐标；正确写法须为 url() 后跟标准关键字，如 cursor: url("a.png") 4 6, pointer。
直接用 cursor 配合 url() 可以自定义指针，但浏览器限制多、 fallback 必须写、尺寸和热点位置容易出错——不是贴张图就能用。
为什么 cursor: url(...) 经常不生效
常见现象是鼠标还是默认箭头，或显示为“禁止”图标。根本原因通常是：
-
url()路径 404 或跨域（本地文件协议file://下多数浏览器直接禁用） - 没写 fallback 值（
cursor是「值列表」，必须以标准关键字结尾，如auto、pointer） - 图片尺寸超标：Chrome / Edge 限制为 128×128px，Firefox 是 256×256px，超限静默降级
- 没指定热点（hotspot）：PNG 无透明通道时默认取左上角 (0, 0)，导致点击偏移
cursor 自定义语法和 fallback 规则
正确写法必须是 url() + 至少一个标准关键字，顺序不能反：
button {
cursor: url("arrow.cur"), pointer;
/* 或带 hotspot 的 PNG */
cursor: url("hand.png") 4 6, pointer;
}
说明：
-
url("hand.png") 4 6表示以图片中坐标 (4px, 6px) 为点击热点（即鼠标光标“尖端”） - 多个
url()可逗号分隔，浏览器按顺序尝试，第一个可用的生效 - fallback 关键字不可省略，否则整个声明无效（CSS 解析失败）
- .cur 文件比 PNG 兼容性更好（尤其 IE），且内建 hotspot 信息，但制作成本高
实际项目中更稳妥的替代方案
纯 CSS 实现不了真自定义图形，但能覆盖多数交互意图：
- 手型操作：用
cursor: pointer（别硬套 PNG，用户认知已固化） - 禁用状态：用
cursor: not-allowed（比自定义“禁止”图标更可访问） - 拖拽场景：用
cursor: grab/grabbing（原生语义清晰，无需图片） - 需要动态切换？JS 控制 class 比内联
style.cursor更易维护
如果真要图形化，优先用 SVG Sprite + background-image 模拟（通过伪元素定位），规避 cursor 的尺寸/跨域/热点问题。
真正麻烦的从来不是怎么写那行 cursor，而是验证它在 Safari 移动端、Windows 高 DPI 屏、以及用户开了系统指针缩放时是否还准——这些几乎没法靠 CSS 单独解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
