CSS 的 cursor 属性用于设置鼠标悬停时的指针样式，提升交互反馈；支持 default、pointer、text、move、not-allowed、wait 等系统值，以及 url() 自定义图片光标（需 fallback），但 IE 仅支持 .cur/.ani，移动端 Safari 不支持自定义图片。
CSS 中通过 cursor 属性可以轻松修改鼠标悬停在元素上时的指针样式，控制交互反馈，提升用户体验。
常用 cursor 值及适用场景
浏览器内置了多种光标类型，直接赋值即可生效：
- default：默认箭头（通常无需显式设置）
- pointer：小手图标，常用于可点击元素（如按钮、链接）
- text：I 形光标，表示可文本输入或选中（如 input、p 标签）
- move：四向箭头，适合拖拽操作区域
- not-allowed：圆圈斜杠，表示当前不可操作
- wait：沙漏或旋转图标，提示加载中
自定义图片光标
支持使用 PNG、GIF 等格式的图片作为光标，需指定尺寸和热区位置：
- 语法：
cursor: url("cursor.png"), default; - 推荐尺寸：32×32 像素以内，部分浏览器对大图支持不佳
- 可加坐标偏移（如
url("hand.cur") 4 12, pointer），第二个值为 x 偏移，第三个为 y 偏移，单位是像素 - 必须提供 fallback（逗号后的一个系统光标），否则自定义失败时会回退为默认箭头
注意事项与兼容性
实际使用中需注意以下细节：
立即学习“前端免费学习笔记（深入）”；
- IE 仅支持 .cur 和 .ani 格式，不支持 PNG 直接作为光标（除非转成 .cur）
- 移动端 Safari 不支持自定义图片光标，但系统光标值基本都可用
- 慎用
cursor: none—— 虽然可行，但会隐藏光标，影响可访问性和操作反馈，不建议常规使用 - 建议对交互元素（如按钮、卡片、表单项）统一设置 cursor，保持行为一致
快速应用示例
给所有链接加手型光标：
a { cursor: pointer; }禁用某个按钮的点击态：
.btn-disabled { cursor: not-allowed; opacity: 0.5; }为拖拽容器设置移动光标：
.draggable { cursor: move; } 
