光标属性
最后更新：2026-09-13
cursor 光标属性
cursor 用于控制当鼠标指针悬停在元素上时显示的光标形状，是向用户传达元素可交互性的重要视觉线索。通过设置不同的光标类型（如 pointer、text、not-allowed），可以直观地告诉用户该元素是否可点击、可拖动或禁用。
| 分类 | |
|---|---|
| 初始值 | auto |
| 继承 | 是 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
cursor: [ [ <url> [ <x> <y> ]? ]# , ]* [ auto | default | none | pointer | text | move | not-allowed | grab | grabbing | progress | wait | help | cell | crosshair | zoom-in | zoom-out | <cursor-keyword> ];⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
auto | default | pointer | text | move | wait | help | not-allowed | grab | grabbing | crosshair | 关键字 | 预定义光标类型 |
none | 关键字 | 隐藏光标 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| cursor | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1.2 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： pointer 是最常用的值，表示元素可点击；在可交互元素（如按钮、链接）上显式设置 pointer 能提升可用性。
提示： 可以使用自定义图片作为光标，格式为 cursor: url(cur.cur), auto，建议始终提供后备关键字。
❓ 常见问题
Qcursor: none 会隐藏光标，这样好吗？
A绝大多数场景下不建议隐藏光标，用户会失去位置感和操作反馈，还会影响可访问性。仅适合特殊场景，如全屏演示、游戏画布、以及已用自定义光标覆盖交互的区域。隐藏后建议提供键盘操作替代方案，避免用在包含大量文本的页面上。
Qgrab 和 grabbing 有什么区别？
Agrab 显示「张开的手」，表示元素可以被拖拽，通常设置在拖拽源上；grabbing 显示「握紧的手」，表示正在拖拽中，由 JavaScript 在拖拽开始/进行时切换。两者常配合 Pointer Events 实现卡片拖拽、滑块等交互，给用户即时的状态反馈。
Q怎么用自定义图片作为光标？
A写法为 cursor: url('cursor.png') 20 10, auto;：url 指定图片路径，后面的两个数字是热点（点击生效点）的坐标，最后的 auto 是图片加载失败时的后备光标，必须保留。建议使用 .cur、.png 或 .svg，尺寸 32×32 以内，跨平台兼容性更好。
Q按钮和链接上为什么要加 cursor: pointer？
A按钮和链接的默认光标未必是手型（按钮在部分浏览器中显示为箭头），显式设置 cursor: pointer 能明确传达「可点击」的语义，提升可用性和点击率。注意不要滥用：纯文本和不可交互的元素加 pointer 会让用户误以为可点击。
🏷️ 相关属性
💡 相关案例
📚 相关教程
