通过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：放大或缩小手势，用于缩放操作
自定义光标
除了使用内置样式，还可以用图片自定义光标：
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
立即学习“前端免费学习笔记（深入）”；
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 能提升用户体验，让交互更直观。注意自定义光标在不同系统和浏览器中兼容性略有差异，建议测试后再上线。
以上就是在css中如何用cursor设置鼠标指针样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1000244.html
微信扫一扫 
支付宝扫一扫 
