CSS 游标一览
CSS cursor 属性的全 36 种游标,悬停即可查看效果并复制代码
特点
展示 cursor 全 36 种类型
集合 CSS 标准关键词于一页
悬停实时查看效果
鼠标移入时游标形状实时变化
按用途分为 6 组
附加说明便于快速查找目标游标
一键复制 CSS 代码
以「cursor: pointer;」的形式直接可用
使用方法
从分组中查找
从「一般」「拖拽」等用途分类中查找候选项
悬停确认效果
将鼠标移至「将鼠标放在此处」区域查看游标形状
复制并粘贴
点击「复制」按钮获取 CSS 代码,粘贴到自己的样式表中

使用场景
按钮与链接游标确认
确认可点击元素上 pointer 游标的外观
拖拽操作界面的游标选择
对比 grab、move、copy 游标,为排序或移动操作选择合适的形状
禁用和处理中状态的区分
对比 not-allowed、wait、progress 的实际效果并正确使用
CSS 学习中值的记忆
一次性查看 cursor 所有可用值和含义并记忆
基础知识
pointer 与 default 的区别
pointer 是指形游标,用于表示链接或按钮等可点击的元素。default 是环境标准的箭头形游标,基本用于文字或背景等点击无效的位置。
cursor 初始值 auto 的行为
cursor 属性的初始值为 auto,浏览器会根据位置自动选择游标形状,在文字上显示 text,其他位置显示 default。
指定 cursor 后游标不变的原因
指定 cursor 后游标形状不变,通常是因为其他元素覆盖在上面,或被其他规则覆盖了。
- 覆盖的元素:透明元素或伪元素覆盖在上面时,游标形状会遵循最上层元素的 cursor 设置。
- 优先级覆盖:同一元素有多条规则时,优先级(选择器权重)高的规则的 cursor 设置会被优先使用。
- 操作系统和浏览器的差异:游标的外观由操作系统或浏览器提供,相同的值在 Windows 和 macOS 上的形状可能不同。
安全性和隐私
浏览器内完成
输入数据仅在您的浏览器内处理,不会发送至外部。
仅在浏览器内处理
游标显示和代码复制完全在您的浏览器内进行,输入数据不会发送到服务器。
通信采用HTTPS加密
页面加载也通过TLS加密,第三方无法读取内容。
不向第三方发送
不向广告网络、跟踪器等外部服务发送输入内容。
结果不自动保存
复制的代码和输入建议不会保存到服务器。
在Google搜索中关注RAKKOTOOLS
189个实用工具,在Google搜索和AI搜索中更容易找到!
- 在搜索中找到
- 在AI搜索中也显示
- 发现新工具
更新信息
- update #318
添加CSS光标列表,用鼠标悬停查看并复制cursor的全部种类
