CSS中的cursor属性详解

描述
cursor属性用于定义鼠标指针在元素上悬停时显示的光标形状。这个属性在网页交互设计中非常重要，通过改变光标样式可以给用户提供直观的交互反馈。cursor属性支持多种预定义光标类型，还可以自定义图片作为光标。

基本语法和常用值

1. 默认光标：cursor: default; - 系统默认箭头光标
2. 指针光标：cursor: pointer; - 手型指针，常用于可点击元素
3. 文本光标：cursor: text; - I型文本选择光标
4. 移动光标：cursor: move; - 十字箭头，表示可移动
5. 等待光标：cursor: wait; - 沙漏或旋转圆圈，表示加载中
6. 禁用光标：cursor: not-allowed; - 带斜杠的圆圈，表示不可操作

自定义光标

1. 使用图片：cursor: url('cursor.png'), auto;
   • 可以指定自定义图片作为光标
   • 必须提供备用光标（如auto），当图片无法加载时使用
2. 设置热点位置：cursor: url('cursor.png') 10 5, auto;
   • 数字10和5分别表示热点距离图片左上角的x和y偏移量
   • 热点是光标实际点击的位置点

功能型光标

1. 缩放光标：
   • cursor: zoom-in; - 带加号的放大镜
   • cursor: zoom-out; - 带减号的放大镜
2. 拖拽光标：
   • cursor: grab; - 张开的手，表示可抓取
   • cursor: grabbing; - 握拳的手，表示抓取中
3. 调整大小光标：
   • cursor: n-resize; - 上下箭头（北方向）
   • cursor: e-resize; - 左右箭头（东方向）
   • cursor: nesw-resize; - 双头斜箭头

实际应用示例

.button {
  cursor: pointer;  /* 按钮显示手型光标 */
}

.disabled {
  cursor: not-allowed;  /* 禁用状态显示禁止光标 */
}

.draggable {
  cursor: grab;  /* 可拖拽元素显示抓取光标 */
}

.zoomable {
  cursor: zoom-in;  /* 可缩放元素显示放大镜 */
}

.custom-cursor {
  cursor: url('custom.cur'), url('custom.png'), auto;  /* 自定义光标 */
}

注意事项

1. 自定义光标文件格式支持.cur、.png、.svg等
2. 光标图片尺寸不宜过大，通常建议32x32像素
3. 提供备用光标确保兼容性
4. 避免过度使用自定义光标影响用户体验

通过合理使用cursor属性，可以显著提升网页的交互体验和可用性。