在前端页面开发中，合理设置鼠标样式可以给用户传递更清晰的交互提示，css的cursor属性就是用来控制鼠标指针在元素上悬停时显示样式的核心属性，通过不同的取值可以实现系统预设样式或自定义图标样式。
cursor属性基本语法
cursor属性可以直接应用在任意html元素上，语法格式非常简单，取值为对应的样式关键字或者自定义图标的路径，基本使用方式如下：
/* 基础语法 */
选择器 {
cursor: 取值;
}
常用系统预设鼠标样式
css为cursor属性提供了大量系统预设的样式取值，这些样式不需要额外引入资源，直接设置即可生效，常见的分类如下：
通用交互类
default：默认箭头样式，是浏览器初始的鼠标样式pointer：小手样式，通常用于可点击的链接、按钮元素wait：等待样式，通常是转圈的加载图标，用于页面加载或请求处理场景help：带问号的箭头样式，提示用户该元素有辅助说明
文本操作类
text：文本输入样式，通常是I型光标，用于可编辑文本区域vertical-text：垂直文本输入样式，用于垂直排列的文本编辑场景move：十字移动样式，提示用户该元素可以拖拽移动
缩放调整类
zoom-in：放大样式，提示用户可以放大查看内容zoom-out：缩小样式，提示用户可以缩小内容col-resize：列调整样式，用于可调整列宽的表格场景row-resize：行调整样式，用于可调整行高的表格场景
自定义鼠标图标实现
除了系统预设样式，cursor属性还支持自定义鼠标图标，只需要传入图片路径作为取值即可，同时建议设置备用系统样式，避免自定义图标加载失败时样式异常。示例如下：
/* 自定义鼠标图标，设置备用样式 */
.custom-cursor {
/* 图片路径可以是相对路径或绝对路径，支持png、cur、ico等格式 */
cursor: url('cursor-icon.png'), pointer;
}
需要注意自定义图标的尺寸建议控制在32x32像素以内，过大的图标可能在部分浏览器中显示异常，同时如果设置了多个自定义图标路径，浏览器会按顺序加载，第一个可用的图标会被使用。
实际场景应用示例
以下是一个完整的页面示例，展示不同元素设置不同鼠标样式的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>cursor属性示例</title>
<style>
.link-btn {
padding: 8px 16px;
background-color: #409eff;
color: white;
border-radius: 4px;
cursor: pointer;
}
.edit-area {
width: 300px;
height: 150px;
border: 1px solid #ccc;
padding: 10px;
cursor: text;
}
.loading-box {
width: 200px;
height: 100px;
background-color: #f5f5f5;
text-align: center;
line-height: 100px;
cursor: wait;
}
</style>
</head>
<body>
<div class="link-btn">可点击按钮</div>
<div class="edit-area" contenteditable="true">点击此处编辑文本</div>
<div class="loading-box">加载中，请稍候</div>
</body>
</html>
注意事项
使用cursor属性时需要注意几个常见问题：首先不要滥用自定义图标，过多的特殊样式可能会干扰用户正常操作；其次在移动端设备上，cursor属性通常不会生效，因为移动端没有鼠标指针；最后设置自定义图标时务必添加备用系统样式，保证兼容性和 fallback 效果。