cursor属性支持default、pointer、text等基础关键词及url()自定义图片；跨浏览器安全值为default、pointer、wait、not-allowed、text、move，url()需配fallback且ie仅支持.cur格式。
cursor 属性支持哪些值？哪些能跨浏览器用
HTML 里改鼠标指针靠的是 CSS 的 cursor 属性，不是 JavaScript 或 HTML 标签属性。它直接作用于元素的样式，比如 div、a、button 等。
基础关键词值（如 pointer、default、text）在所有现代浏览器都稳定支持；但自定义图片（url()）有明确限制：
- 必须提供至少一个备选关键词（fallback），写在
url()后面，否则 Safari 和部分旧版 Edge 会忽略整条声明 - 图片尺寸建议 ≤ 128×128px，过大可能被 Chrome 截断或 Firefox 拒绝加载
- IE 仅支持 .cur 文件（不支持 .png/.gif），且要求尺寸为 32×32 或 64×64
怎么写一个带 fallback 的自定义 cursor
最简安全写法是把 url() 和关键词写在同一行，用逗号分隔，顺序很重要：浏览器从左到右尝试，第一个能加载的生效。
例如：
button {
cursor: url("arrow.cur"), url("arrow.png"), pointer;
}
这里 arrow.cur 优先给 IE，arrow.png 给其他浏览器，最后用 pointer 牢牢兜底。
注意：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
url()路径必须相对 CSS 文件位置，不是 HTML 页面位置 - 如果用 base64 内联，要加格式声明，如
url("data:image/x-icon;base64,...")，否则 Firefox 不认 - 热区（hotspot）默认是图片左上角（0,0），想偏移需在
url()后加两个像素值，如url("hand.cur") 4 4, pointer
为什么加了 cursor 却没变？常见失效原因
最常踩的坑不是语法错，而是层叠或继承干扰：
- 父元素设置了
cursor: none或其他值，且子元素没显式覆盖 —— cursor 是可继承属性 - 元素本身没有“交互能力”（比如
div默认无hover响应），需确保有 :hover 伪类或已绑定事件（如onclick），否则用户感知不到变化 - CSS 选择器权重不够，被其他规则覆盖，用浏览器开发者工具检查 computed 栏里的
cursor是否被 strike-through - 图片路径 404，但浏览器静默失败，只回退到下一个值 —— 所以 fallback 关键词不能省
移动端和高 DPI 屏幕要注意什么
cursor 在 iOS 和 Android 上基本无效（触摸设备无 hover 概念），所以加了也看不到；桌面端高 DPI 屏（如 MacBook Retina）对图片 cursor 有额外要求：
- 单张图在高 DPI 下会模糊，推荐提供 2x 版本并用
image-set()（Chrome/Firefox 支持，Safari 尚未支持） - 更稳妥的做法是只用系统关键词，或用 SVG 替代位图（SVG 可缩放，且
url("icon.svg")在主流浏览器中表现一致） - 避免在
:active或:focus中单独设 cursor —— 大多数系统会强制覆盖为 default
真正麻烦的从来不是写对那一行 cursor，而是得同时兼顾 fallback 顺序、路径上下文、设备类型和 DPI 缩放 —— 少一个条件，就可能在某个用户屏幕上彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
