CSS如何自定义鼠标指针样式:通过cursor:url加载SVG或图片

cursor: url() 必须配至少一个fallback关键字（如pointer），否则整条规则被忽略；SVG需转base64 data URL；尺寸≤128×128px；必须指定热点坐标，路径相对CSS文件。

直接用 cursor: url() 加载 SVG 或图片是可行的，但浏览器不会原样接受你写的任何路径或格式——它有硬性限制和隐含规则，不按套路来，光标就“消失”或回退成默认箭头。

为什么 cursor: url("icon.png") 不生效？

最常见原因是缺备用值。url() 后面**必须跟至少一个 CSS 光标关键字**，比如 pointer、auto 或 default。只写 url("x.png") 是无效声明，现代浏览器会直接忽略整条规则。

• 错误写法：cursor: url("hand.png");
• 正确写法：cursor: url("hand.png"), pointer;
• 多个兜底更稳妥：cursor: url("hand.cur"), url("hand.png"), pointer;（先试 .cur，再试 .png，最后 fallback 到 pointer）

url() 中的 SVG 怎么转成可用光标？

不能直接写 url("icon.svg")。SVG 文件需转为 base64 data URL，并确保编码正确。否则浏览器解析失败，跳过该 url() 项。

• 先对 SVG 字符串做 encodeURIComponent → unescape → window.btoa 三步编码（顺序不能错）
• 生成的 data URL 格式必须是：data:image/svg+xml;base64,xxxx
• 示例代码：

  const svg = `<svg width="24" height="24" viewBox="0 0 24 24">...</svg>`;<br>const dataUrl = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));<br>element.style.cursor = `url(${dataUrl}) 12 12, default`;

图片尺寸、格式和热点坐标怎么设才不翻车？

Chrome / Edge / Safari 对自定义光标有严格尺寸上限：推荐 ≤32×32px，最大别超 128×128px。超限直接拒用，连 fallback 都不触发（部分旧版 Chrome 甚至静默失败）。

立即学习“前端免费学习笔记（深入）”；

• 格式优先级：.cur > .png > .gif；.jpg 基本不支持，别试
• 热点坐标（x y）可选，但强烈建议填：它决定鼠标点击时的逻辑落点。例如 24×24 图标中心点是 12 12，不写就默认左上角 0 0，导致“点哪不中哪”
• 路径必须相对 CSS 文件位置，不是 HTML 文件——用 DevTools 的 Network 面板确认图片是否 200 OK

全局设置 body 光标时要注意什么？

给 body 设 cursor: url(...), auto 看似简单，实际容易踩两个坑：

• 子元素如果自己设置了 cursor（比如按钮设了 pointer），会覆盖 body 的设置——这不是 bug，是 CSS 层叠规则
• 若页面有 iframe，且 iframe 内容跨域，它的光标不受父页控制；同源 iframe 才继承
• 性能提示：频繁切换大量元素的 cursor（如表格每行 hover）可能触发重绘，优先用 class 切换而非 JS 直接改 style

真正难的不是写对那一行 cursor，而是让所有浏览器在所有路径、尺寸、编码、降级场景下都稳定显示——后备值、尺寸、编码、坐标，四者缺一不可。