[CSS揭秘]鼠标光标

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

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

crosshair	help	move	pointer	progress	text	wait	e-resize
ne-resize	nw-resize	n-resize	se-resize	sw-resize	s-resize	w-resize	none
context-menu	cell	vertical-text	alias	copy	no-drop	not-allowed	ew-resize
ns-resize	nesw-resize	nwse-resize	col-resize	row-resize	all-resize	zoom-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

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