最常见原因是缺少必填的 fallback 关键字，W3C 要求 url() 后必须跟逗号和标准关键字（如 pointer）；其他原因包括路径错误、图片超尺寸、PNG 未设热点坐标、.cur 大小写敏感、移动端忽略等。
cursor: url() 为什么写了没反应
最常见的情况是只写了 cursor: url("hand.cur");，浏览器加载失败或不支持时直接跳过，结果光标还是默认箭头——因为缺了必填的 fallback 关键字。W3C 明确要求：url() 后必须跟一个逗号和标准关键字，比如 pointer 或 auto。
其他高频原因包括：
- 路径错误：Firefox 解析
url()的相对路径是以 CSS 文件位置为基准，不是 HTML 页面位置 - 图片尺寸超限：Chrome 支持最大 128×128px，Safari 和旧版 Edge 建议 ≤32×32px
- 格式不兼容：PNG/SVG 必须手动指定热点坐标，否则点击点会偏移；.cur 文件自带热区，更省心
- 移动端默认禁用：iOS Safari 和多数安卓 WebView 完全忽略
url()，只认关键字
用 PNG 做自定义光标时怎么设热点坐标
PNG 没有内建热区，浏览器默认取图片中心点作为点击位置。16×16 的小图标中心是 (8, 8)，但实际设计里“手指尖”往往在左下或正下方，不调坐标就会点不准。
url() 后可追加两个数值，单位 px，表示从左上角起的 x、y 偏移：
立即学习“前端免费学习笔记（深入）”；
cursor: url("hand.png") 4 12, pointer;
这行代码表示：鼠标点击行为落在图片内横向 4px、纵向 12px 的位置。常用技巧：
- 负值合法：
url("dot.svg") -2 -2, crosshair;可把热点精准对准 SVG 中心圆点 - 调试建议：先用纯色方块 PNG（如 32×32 红块），配合明显坐标（如
0 0）验证偏移效果 - 别依赖预处理器：Sass/Less 里拼接
url()路径容易出错，建议写死或用 CSS 自定义属性注入
.cur 格式比 PNG 更适合初学者
如果你只是想快速让光标换图，不折腾坐标、不纠结兼容性，优先用 .cur 文件。它原生支持热区、Windows/macOS/Linux 浏览器都认，且无需额外参数：
cursor: url("grab.cur"), grab;
注意两点：
- 生成方式简单：在线工具（如 convertio.co）可把 PNG 直接转 .cur，上传时指定热区点即可
- 文件名后缀必须是
.cur，不能是.CUR或.Cur—— Chrome 对大小写敏感 - 仍需 fallback：即使 .cur 加载成功，也要写逗号后的关键字，否则 Safari 可能回退到
default而非你预期的grab
移动端要不要加自定义光标
不要加。iOS Safari、微信内置 WebView、大部分安卓浏览器完全忽略 url()，写了也白写，还可能触发渲染异常。正确做法是用媒体查询隔离：
@media (hover: hover) and (pointer: fine) {<br> .drag-area { cursor: url("move.cur"), move; }<br>}
这个条件确保只在支持悬停+高精度指针的设备上启用自定义光标。日常开发中，更稳妥的是：所有交互提示优先靠关键字（grab、not-allowed、zoom-in）传达意图，url() 仅作为增强层存在。
真正容易被忽略的点是：光标不是装饰，它是交互契约的一部分。用户看到 pointer 就准备点击，看到 not-allowed 就知道当前不可操作。自定义图案再酷，也不能破坏这个直觉。
