在css中如何用cursor设置鼠标指针样式

通过cursor属性可设置鼠标指针样式，如pointer、text、move等，用于提供交互反馈；支持自定义图片光标并设置备选值，合理使用能提升用户体验，需注意兼容性。

在 CSS 中，可以通过 cursor 属性来设置鼠标指针的样式。当用户将鼠标移动到某个元素上时，浏览器会显示指定的光标形状，从而提供视觉反馈。

基本语法

cursor: 值;

将“值”替换为具体的光标类型，比如 pointer、move 等。

常用光标样式示例

以下是一些常用的 cursor 取值及其效果：

• auto：默认光标，由浏览器自动决定（通常是箭头）
• default：默认箭头光标
• pointer：手型光标，常用于可点击元素（如按钮、链接）
• text：文本输入光标（I 形状），适用于可编辑区域
• wait：等待光标（如旋转的圆圈或沙漏），表示操作正在进行
• move：移动光标（四向箭头），表示元素可以拖动
• not-allowed：禁止符号（圆圈加斜杠），表示操作不被允许
• help：帮助光标（带问号），提示用户可以获得帮助
• crosshair：十字线光标，适合选择或绘图场景
• zoom-in / zoom-out：放大或缩小手势，用于缩放操作

自定义光标

除了使用内置样式，还可以用图片自定义光标：

cursor: url('path/to/cursor.png'), auto;

其中：

• url() 指定光标图像文件路径，支持 .cur、.ani、.png 等格式
• 后面必须跟一个备用光标（如 auto 或 pointer），以防图片加载失败
• 可以设置多个自定义光标作为备选：
  cursor: url('custom1.cur'), url('custom2.ani'), pointer;

实际应用示例

.btn {
  cursor: pointer;
}

.editable {
  cursor: text;
}

.draggable {
  cursor: move;
}

.disabled {
  cursor: not-allowed;
}

基本上就这些。合理使用 cursor 能提升用户体验，让交互更直观。注意自定义光标在不同系统和浏览器中兼容性略有差异，建议测试后再上线。