CSS 游标一览

CSS cursor 属性的全 36 种游标,悬停即可查看效果并复制代码

特点

展示 cursor 全 36 种类型

集合 CSS 标准关键词于一页

悬停实时查看效果

鼠标移入时游标形状实时变化

按用途分为 6 组

附加说明便于快速查找目标游标

一键复制 CSS 代码

以「cursor: pointer;」的形式直接可用

使用方法

1

从分组中查找

从「一般」「拖拽」等用途分类中查找候选项

2

悬停确认效果

将鼠标移至「将鼠标放在此处」区域查看游标形状

3

复制并粘贴

点击「复制」按钮获取 CSS 代码,粘贴到自己的样式表中

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搜索中也显示
  • 发现新工具

更新信息