无需登录 数据私有 本地保存

CSS 光标样式预览工具 - 所有内置光标效果展示

11
0
0
0

CSS 光标样式预览

悬停卡片即可预览所有浏览器内置光标效果 · 点击卡片一键复制 CSS 代码

35
内置光标样式
6
功能分类
35
当前显示

常见问题与知识点

CSS cursor 属性用于设置鼠标指针在元素上时显示的光标样式。它定义了用户与网页元素交互时的视觉反馈。例如，pointer（手型）表示可点击，text（I型）表示可选中文本，wait（沙漏/转圈）表示正在加载。合理使用光标样式能显著提升用户体验和界面可用性。

auto 是浏览器的默认行为，会根据上下文自动选择光标（如在链接上显示手型，在文本上显示I型）。default 则强制使用标准的箭头光标，不考虑上下文。大多数情况下使用 auto 即可，当你需要覆盖浏览器默认行为时才使用 default。

cursor: pointer 显示为手型指示器，表示元素可点击。适用于：按钮、链接、可点击的卡片、JavaScript 交互元素、分页器、标签页切换等。它是 Web 上最常用的光标样式之一，能给用户清晰的"可点击"暗示，减少用户猜测。

grab 显示为张开的手掌，表示元素可以被抓取/拖拽（如可拖动的卡片、滑块）。grabbing 显示为握紧的拳头，表示正在拖拽中。典型用法：在可拖拽元素上设置 grab，在拖拽进行时（如 :active 或 JS 拖拽事件中）切换为 grabbing，给用户直观的抓取反馈。

cursor: none 会完全隐藏鼠标指针。常见用途：全屏视频播放器（几秒无操作后隐藏光标）、Kiosk 自助终端界面、游戏应用、沉浸式展示页面、屏幕录制时隐藏光标等。注意使用时要确保用户有其他交互方式（如键盘），避免造成操作困难。

大多数标准光标样式（如 pointer、default、text、move、wait、help、crosshair、progress、not-allowed 等）在所有现代浏览器中都有良好支持。部分光标如 grab、grabbing、zoom-in、zoom-out 在 IE 中支持有限。调整大小类光标（n-resize、e-resize 等）在主流浏览器中均受支持，但实际显示效果可能因操作系统而异。

使用 cursor: url('custom-cursor.png'), auto; 语法可以设置自定义光标图像。URL 指向光标图片（支持 .cur、.png、.svg 等格式），后面的 auto 是 fallback 值。建议图片尺寸控制在 32×32 像素以内，并始终提供 fallback 光标值，确保加载失败时仍有可用光标。

移动端（触摸设备）通常没有鼠标光标，cursor 属性在移动端基本无效。但考虑到响应式设计和桌面端用户（如 iPad + 妙控键盘、Surface 等二合一设备），仍然建议为交互元素设置合适的光标样式。移动端开发时应以触摸交互（如点击区域大小、手势）为优先。
🔧 相关工具