当cursor 是 CSS 中非常实用的属性之一，它用来设置鼠标指针悬停在元素上时的样式。它不会影响元素行为，只是改变了用户体验中的“鼠标样式反馈”。
🔍 基本语法
selector {cursor: value;
}- value
- 可以使用标准名称，也可以使用自定义图片（url(...)）作为鼠标指针。
🧠 常见的鼠标样式类型（重点常用）
值 | 效果 | 用途说明 |
default | 默认箭头指针 | 普通状态（大多数元素默认值） |
pointer | 手形（☝️） | 可点击的元素，如按钮、链接 |
text | 文本光标（I形） | 表示该区域可输入文字，如 input、textarea |
move | 移动十字箭头 | 表示该区域可拖动 |
grab / grabbing | 抓手 / 抓住 | 用于可拖拽的元素，交互感更强 |
not-allowed | 🚫 禁止符号 | 用于禁用按钮或区域 |
wait | 沙漏 / loading 圈 | 表示加载中、请稍候 |
help | 问号指针 | 表示该区域有帮助信息 |
crosshair | 十字瞄准线 | 图形编辑类应用中常见 |
progress | 指针+loading圈 | 表示正在处理，但仍可交互 |
💡 示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>Cursor 示例</title><style>.btn {padding: 10px 20px;background-color: skyblue;cursor: pointer;}.disabled {background-color: #ccc;cursor: not-allowed;}.text-area {border: 1px solid #ccc;padding: 10px;cursor: text;}.drag {background: lightgreen;padding: 20px;cursor: grab;}.help {color: blue;cursor: help;}</style>
</head>
<body><button class="btn">点击我</button><button class="disabled">不可点击</button><div class="text-area">点击我试试，你的光标会变成文本插入样式</div><div class="drag">拖我试试（视觉上）</div><div class="help">鼠标悬停显示帮助样式</div></body>
</html>🔧 自定义鼠标样式（自定义图片）
你还可以用图片来设置指针样式，配合 url(...)：
.custom-cursor {cursor: url('cursor.png'), auto;
}- 第一个参数是你自定义的鼠标图片路径
- 第二个参数是“备选值”，图片加载失败时使用
📌 注意：图片推荐使用 .cur 或 .png 格式，且尺寸建议为 32x32 或以下。
🧪 鼠标样式+行为示例场景
场景 | 推荐 cursor 值 |
链接 / 按钮 | pointer |
禁用按钮 | not-allowed |
文本框 | text |
拖拽卡片 | grab / grabbing |
图片裁剪工具 | crosshair |
自定义加载区域 | wait / progress |
✅ 最佳实践建议
- 增强用户体验：通过 cursor 提供操作反馈，比如 hover 状态改为 pointer。
- 保持一致性：避免过度使用非常规光标（用户可能不懂）。
- 不要滥用：例如不要对不可点击元素设置 pointer，容易误导用户。
)
)
