在网页交互中，鼠标光标是用户与页面"对话"的第一触点。一个小小的光标变化，就能清晰地告诉用户：“这里可以点”、“这里可以输入”、“请稍等”……

今天我们就来好好聊聊 CSS 中这个看似简单、却极大影响用户体验的属性——cursor。

什么是 cursor 属性

cursor 属性用于设置鼠标指针悬停在元素上时所显示的光标形状。

它的默认值是一个箭头（通常由浏览器通过 auto 决定具体样式），但我们可以根据元素的交互含义，把它改成手型、文本线、等待图标等等。

基本语法非常简单：

selector {
  cursor: value;
}

最常见的用法：cursor: pointer

前端开发里，最高频的 cursor 取值就是 pointer。

当用户把鼠标移到一个可点击的元素（比如链接 <a>、按钮 <button>，或是用 JS 绑定了点击事件的 <div>）上时，光标会变成一只"小手"，直观地暗示"我可以点"。

<style>
    .box1{
        width: 200px;
        height: 100px;
        background-color: red;
        /* 设置鼠标光标为小手 */
        cursor: pointer;
    }
</style>

<div class="box1">
    好好学习！
</div>

💡 即使元素不是 <a> 或 <button>，只要它具备点击功能（比如绑定了 JS 事件），都应该加上 cursor: pointer，避免用户困惑。

常用 cursor 取值一览

除了 pointer，CSS 还内置了几十种光标形状。下面这张表列出了日常开发中最常用的一批：

取值	光标外观	典型使用场景
default	默认箭头	静态内容、普通区域
pointer	手型	链接、按钮等可点击元素
text	文本输入竖线	可编辑文本区域
move	移动十字箭头	表示元素可被拖动
wait	等待（沙漏/转圈）	系统正在处理
not-allowed	禁止符号（圆圈+斜杠）	不可操作的控件
help	带问号的指针	提供帮助信息
crosshair	十字线	精确选取（如画布工具）
grab / grabbing	抓取 / 抓住的手	可拖拽元素的不同状态
zoom-in / zoom-out	放大 / 缩小	图片缩放控件
col-resize / row-resize	左右 / 上下调整箭头	表格列宽、行高拖拽
none	隐藏光标	特殊展示场景（如全屏播放）

⚠️ 注意：grab、grabbing 等是较后期才被支持的属性值，老旧浏览器可能不识别，建议搭配后备值使用。

进阶：用图片自定义光标

除了使用系统内置的光标，cursor 还允许我们用 url() 加载自定义图片作为光标，做出更具品牌感的互动效果。
基本写法

.custom-cursor {
  cursor: url('cursor.png') 4 4, auto;
}

这段代码的含义是：

• url('cursor.png') —— 尝试加载自定义图片
• 4 4 —— 可选的热点坐标（即实际点击位置相对于图片左上角的偏移）
• auto —— 后备值，图片加载失败时使用

多重后备，优雅降级
cursor 属性支持逗号分隔的多个值，浏览器会按顺序尝试，直到找到可用的那个：

.baz {
  cursor: url("one.svg"), url("two.png") 5 5, pointer;
}

MDN 明确指出：使用 url() 时，最后必须提供一个非 URL 的后备关键字值，否则整个声明可能被忽略。
自定义光标的注意事项

1. 图片尺寸：推荐使用 32×32 像素以内的图像，超出浏览器支持范围的光标通常会被忽略
2. 文件格式：.cur 和 .ico 在 Windows/Edge 上效果最佳；.png 广泛支持（但在某些浏览器中可能忽略热点）；.svg 支持较少
3. 热点坐标：两个小于 32 的无单位非负整数，用来定义光标的"激活点"
4. 始终提供后备：以防自定义图片加载失败，保证基础可用性

实战示例：按钮悬停反馈

配合 :hover 伪类，cursor 能和其他视觉变化一起，打造更细腻的交互反馈：

.interactive-item {
  cursor: pointer;
  transition: all 0.2s;
}

.interactive-item:hover {
  background-color: #f0f0f0;
  color: #0066cc;
}

鼠标移上去——小手出现、背景变色，用户的"可点击"预期被进一步强化。

小结

• cursor 属性用来设置鼠标悬停时的光标形状
• 最常用的取值是 cursor: pointer，让光标变成"小手"，提示元素可点击
• 除了 pointer，还有 text、move、wait、not-allowed 等几十种内置取值，覆盖各类交互语义
• 使用 url() 可以加载自定义图片光标，但必须提供一个关键字后备值
• 自定义图片建议控制在 32×32 像素以内，并合理设置热点坐标

用好 cursor，能让你的页面"会说话"，在用户还没点击之前，就把交互意图传达得清清楚楚。

读者互动：

• 如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
• 如果觉得文章有帮助，欢迎点赞鼓励。
• 想与我共同进步，欢迎关注我。

💬 感谢各位读者的支持与关注！期待与大家一起在前端开发的道路上共同进步！🎉