首页 > 代码库 > [CSS揭秘]鼠标光标

[CSS揭秘]鼠标光标

鼠标指针可以用来告诉用户当前可以执行什么动作

目前已有的内置光标种类有:

crosshairhelpmovepointerprogresstextwaite-resize
ne-resizenw-resizen-resizese-resizesw-resizes-resizew-resizenone
context-menucellvertical-textaliascopyno-dropnot-allowedew-resize
ns-resizenesw-resizenwse-resizecol-resizerow-resizeall-resizezoom-in

zoom-out

 

介绍几种常用光标

1. 提示禁用状态

not-allowed用于提示某个控件因为某种原因无法进行交互,常常用于表单

:disabled, [disabled], [aria-disabled=‘true‘]{

  cursor: not-allowed;

}

 

2. 隐藏鼠标光标

比如公共场所的信息查询台,娱乐平台需要合适的隐藏鼠标光标,带来可用性提升。

video{

  cursor: none;

}

 

3. 缩放光标

现在提供了几种新的缩放光标,分别是 ew-resize, ns-resize, nesw-resize, nwse-resize

常常用于自定义缩放元素的边界上

[CSS揭秘]鼠标光标