[CSS揭秘]滑鼠游標

標籤：one   copy   指標   center   resize   控制項   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

常常用於自訂縮放元素的邊界上

[CSS揭秘]滑鼠游標