CSS鼠标指针样式大全

把鼠标移到卡片上查看指针样式,点击即可复制CSS。

输入的文字和文件不会发送到服务器,只在本浏览器中处理。

鼠标移到卡片上会变成对应的指针,点击即可复制一行CSS。

基本

链接与状态

选择

拖放

调整大小与滚动

放大与缩小

使用方法

  1. 把鼠标移到卡片上,就能看到该值对应的指针样式。不同操作系统和浏览器的外观会略有差别。
  2. 点击想要的卡片,会复制「cursor: 值;」,粘贴到CSS规则里即可。
  3. 在「搜索」中输入resize、移动等关键词,只显示相关的指针。
  4. 手机、平板等没有鼠标的设备上看不到指针,请在电脑上查看。

常见问题

可以用自己的图片做鼠标指针吗?

写成 cursor: url(cursor.png) 4 4, pointer; 即可。两个数字是点击热点的坐标(x y),最后一定要加一个标准值,以防图片加载失败。图片尺寸建议不超过32×32px。

pointer和default分别什么时候用?

链接、按钮等可点击的元素用pointer,普通区域用default。在不能点击的地方用pointer,会让用户误以为可以点。

有些浏览器里grab不显示?

很老的浏览器需要-webkit-grab这样的前缀,现在的Chrome、Edge、Firefox、Safari都已支持标准值grab和grabbing。

相关工具

全部工具