在css中如何使用cursor设置鼠标样式

CSS的cursor属性用于设置鼠标悬停时的指针样式，提升交互体验。支持default、pointer、wait等内置类型，也可通过url()使用自定义图像并指定热点位置，如cursor: url('cursor.cur'), default。实际应用中，.btn用pointer表示可点击，.loading用wait提示加载，.disabled用not-allowed禁止操作，合理使用可增强界面直观性。

在CSS中，cursor 属性用于定义鼠标指针在元素上悬停时的样式。通过设置不同的光标形状，可以提升用户体验，比如提示用户某个元素是否可点击、拖动或正在加载。

基本语法

将“值”替换为具体的光标类型，例如 pointer、move 或 wait 等。

常用内置光标类型

以下是CSS支持的一些常见光标样式：

• default：默认箭头（大多数元素的默认值）
• pointer：手型光标，常用于链接或按钮
• text：文本输入光标（I 形状），适用于可编辑区域
• wait：等待光标（如旋转圆圈或沙漏），表示操作正在进行
• help：带问号的光标，表示帮助信息
• move：移动光标（四向箭头），表示元素可拖动
• not-allowed：禁止符号（圆圈加斜杠），表示不可操作
• crosshair：十字线光标，适合选择或绘图场景
• zoom-in / zoom-out：放大/缩小手势，用于图片查看器等

自定义光标

除了内置样式，还可以使用图像作为自定义光标。支持的格式包括 .cur、.png、.gif 等。

立即学习“前端免费学习笔记（深入）”；

Cursor Directory

专为Cursor设计的开源资源库、提示词库

110

查看详情

其中，url() 指定自定义光标文件路径，后面的 default 是备用光标，当自定义光标无法加载时使用。

还可以指定热点位置（即光标的精确点击点）：

这里的 2 8 表示从图像左上角起，X偏移2像素，Y偏移8像素的位置为点击热点。

实际应用示例

基本上就这些。合理使用 cursor 能让界面交互更直观，注意保持兼容性和可访问性即可。不复杂但容易忽略细节。

以上就是在css中如何使用cursor设置鼠标样式的详细内容，更多请关注php中文网其它相关文章！