CSS的cursor属性用于定义鼠标指针在元素上方悬停时的显示样式，合理设置这个属性可以让用户更直观地了解元素的功能，提升页面的交互体验。不同的光标样式对应不同的操作场景，开发者可以根据元素的作用选择合适的取值。
CSS光标属性基本语法
cursor属性的基础语法格式如下，支持同时设置多个光标值，浏览器会按顺序选择第一个可用的光标样式：
/* 基础语法 */
selector {
cursor: value;
}
/* 多个值示例，优先使用url指定的自定义光标，不可用则使用pointer */
.cursor-demo {
cursor: url('custom-cursor.cur'), pointer;
}
常见光标类型及示例
通用交互类光标
这类光标常用于标识元素的基础交互状态，是最常用的光标类型：
default：默认光标，通常是箭头，用于普通不可交互元素pointer：手形光标，用于可点击的链接、按钮等元素text：文本选择光标，用于可输入或可复制的文本区域move：移动光标，用于可拖拽移动的元素
/* 通用交互类光标示例 */
.default-cursor {
cursor: default;
}
.pointer-cursor {
cursor: pointer;
}
.text-cursor {
cursor: text;
}
.move-cursor {
cursor: move;
}
操作状态类光标
这类光标用于标识当前正在进行的操作或元素的特殊状态：
wait：等待光标，通常是沙漏或转圈样式，表示程序正在处理help：帮助光标，通常是箭头加问号，表示有额外帮助信息not-allowed：禁止光标，表示当前操作不可执行progress：进度光标，表示操作正在进行但用户仍可交互
/* 操作状态类光标示例 */
.wait-cursor {
cursor: wait;
}
.help-cursor {
cursor: help;
}
.not-allowed-cursor {
cursor: not-allowed;
}
.progress-cursor {
cursor: progress;
}
方向调整类光标
这类光标用于标识元素尺寸可调整的方向：
col-resize：列调整光标，用于可左右调整宽度的元素row-resize：行调整光标，用于可上下调整高度的元素n-resize：向上调整光标，用于可向上拉伸的元素e-resize：向右调整光标，用于可向右拉伸的元素
/* 方向调整类光标示例 */
.col-resize-cursor {
cursor: col-resize;
}
.row-resize-cursor {
cursor: row-resize;
}
.n-resize-cursor {
cursor: n-resize;
}
.e-resize-cursor {
cursor: e-resize;
}
自定义光标使用示例
除了使用系统预设的光标样式，还可以通过url()函数指定自定义光标文件，支持cur、ico等格式，同时需要设置备用光标值：
/* 自定义光标示例，自定义光标不可用则使用pointer作为备用 */
.custom-cursor {
cursor: url('https://ipipp.com/cursor/custom.cur'), pointer;
}
实际应用场景示例
以下是一个简单的页面示例，展示不同元素搭配对应光标的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS光标属性示例</title>
<style>
.btn {
padding: 8px 16px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.input-area {
width: 300px;
height: 100px;
border: 1px solid #ddd;
cursor: text;
}
.disabled-btn {
padding: 8px 16px;
background-color: #f5f5f5;
color: #999;
border: 1px solid #d9d9d9;
border-radius: 4px;
cursor: not-allowed;
}
.draggable-box {
width: 100px;
height: 100px;
background-color: #52c41a;
cursor: move;
}
</style>
</head>
<body>
<button class="btn">可点击按钮</button>
<textarea class="input-area" placeholder="可输入文本区域"></textarea>
<button class="disabled-btn">不可点击按钮</button>
<div class="draggable-box">可拖拽元素</div>
</body>
</html>
注意事项
- 自定义光标文件的路径需要正确，且文件大小尽量小，避免影响页面加载速度
- 不是所有浏览器都支持所有光标取值，设置多个备用值可以提升兼容性
- 不要滥用特殊光标，避免干扰用户的正常操作认知，仅在有明确交互提示需求时使用