通过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;
}
基本上就这些。合理使用 cursor 能提升用户体验，让交互更直观。注意自定义光标在不同系统和浏览器中兼容性略有差异，建议测试后再上线。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/221680.html