如何通过CSS自定义鼠标光标图案_使用cursor: url样式-css教程-PHP中文网

cursor: url() 必须用相对或绝对url，禁用本地路径；需指定热区坐标（如12 12）且fallback为必需项（如pointer）；优先用.cur格式，png/svg需显式声明热区；safari不支持svg光标，应降级为.cur或.png。

如何通过css自定义鼠标光标图案_使用cursor: url样式

cursor: url() 路径必须是相对或绝对URL，不能是本地文件路径

直接拖拽本地图片到 cursor: url() 里是无效的，浏览器会静默忽略——这是最常被卡住的地方。开发时用 file:// 协议打开 HTML 文件，url("my-cursor.png") 会被当成相对于当前文件系统路径解析，但现代浏览器出于安全限制，会直接拒载（控制台报 Not allowed to load local resource）。

实操建议：

启动一个本地服务（比如 python3 -m http.server 8000），用 http://localhost:8000 访问页面
确保图片路径是相对于 HTML 文件位置的，例如 HTML 在 /src/index.html，图片在 /src/assets/cursor.cur，就写 cursor: url("assets/cursor.cur");
优先用 .cur 格式（Windows 原生光标格式），它内置热区坐标，兼容性比 PNG 好；若用 PNG，必须加尺寸和热区，如 url("hand.png") 4 4, auto

热区（hotspot）坐标不设或设错，会导致点击偏移

光标图片左上角默认是热区（即“点击点”），但多数设计稿里手型、箭头等图标的视觉中心不在左上角。不指定热区的话，用户会感觉“明明点在按钮上，却没触发”。

语法中逗号前的两个数字就是热区 X/Y 坐标，单位是像素，从左上角开始算：

cursor: url("pointer.cur"), auto;
cursor: url("hand.png") 12 12, pointer;

常见做法：

用图像编辑器打开光标图，确认实际交互点距左、上边缘的像素值
.cur 文件本身含热区信息，所以单写 url("x.cur") 就够；PNG/SVG 必须显式声明，否则浏览器按 0 0 处理
热区超出图片尺寸不会报错，但行为不可预测，建议控制在宽高范围内

fallback 值不是可选，而是必需的

cursor: url(...), fallback 中的 fallback 不是“锦上添花”，而是强制要求。如果 url() 加载失败（404、跨域、格式不支持），浏览器会跳过整个声明，退回到父级或默认光标——你可能完全察觉不到失败。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确写法必须带至少一个标准关键词作为兜底：

cursor: url("icon.svg") 8 8, pointer;   /* ✅ */
cursor: url("bad-path.ico"), default;   /* ✅ */
cursor: url("arrow.png");               /* ❌ 无效，整条声明被丢弃 */