如何在CSS中通过cursor属性自定义鼠标悬停指针样式-css教程-PHP中文网

cursor属性不支持直接加载自定义图片，必须用url()函数配合.cur格式（推荐）或带alpha的.png、SVG，且须满足三条件：尺寸≤128×128px、提供fallback关键字（如pointer）、指定热点坐标（非.cur时），否则浏览器将忽略该值。

如何在css中通过cursor属性自定义鼠标悬停指针样式

cursor 属性本身不支持直接加载自定义图片（如 .png）作为鼠标指针，除非使用 url() 函数配合特定格式和 fallback 机制——但浏览器兼容性、尺寸限制和热区偏移问题极多，实际项目中几乎不可靠。

用 `url()` 加载自定义光标需满足三个硬性条件

必须同时满足以下三点，否则浏览器会直接忽略该值，退回到默认指针或上一个有效值：

url() 指向的图片文件大小不能超过 128×128 像素（Chrome/Firefox 要求；Edge 更严）
必须提供至少一个备选关键字（如 auto、pointer、default），写在 url() 后面，用逗号分隔
图片需为支持 alpha 通道的格式（.cur 最稳妥，.png 在部分浏览器中可能被静默降级

示例写法：

button {
  cursor: url("hand.cur"), pointer;
}

注意：hand.cur 必须是 Windows 光标格式（含热区定义），不是随便导出的 PNG；若用 url("hand.png")，Firefox 可能加载，Chrome 95+ 已默认禁用非 .cur 的自定义光标。

`cursor: none` 在现代浏览器中仍受限

想彻底隐藏鼠标指针？cursor: none 看似简单，但实际行为不一致：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

桌面端 Chrome/Firefox：仅在全屏（requestFullscreen()）下生效，普通页面会被忽略
Safari：完全不支持 none，会回退到 default
移动端：所有主流浏览器均无视 cursor 属性（触摸设备无“悬停”概念）

替代方案只能靠 JS 配合 pointer-events: none + 绝对定位覆盖层模拟“隐藏”，但会破坏原生交互逻辑，慎用。

真正稳定可用的“类自定义”方案：SVG 内联 + CSS 变量控制

绕过图片加载限制，把简单图标转成内联 data:image/svg+xml Base64，再通过 CSS 变量动态切换。虽然仍是 url() 形式，但规避了跨域、路径错误、缓存失效等问题：

.icon-btn {
  --cursor-svg: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23007bff' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.38 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E";
  cursor: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path fill="%23007bff" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.38 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>"), pointer;
}

关键点：