CSS 指定滑鼠游標的型態

cursor 屬性可以設定多種不同的值,每個值代表 cursor 游標的型態,可以根據不同的元素和情境來選擇合適的 cursor 游標型態,指定游標的型態可以增加網頁的互動性、提示其當前元素的功能。變更滑鼠游標的型態設定 CSS 指定滑鼠游標,當滑鼠移動到指定的部份時,使用各種不同的方式來自訂滑鼠游標型態 cursor 屬性改變滑鼠游標的形狀,表示當前的操作方式。


滑鼠游標顯示效果

指定滑鼠游標的型態,直接將滑鼠游標移到下列範例可看到效果。

cursor: crosshair; /* 十字線型 */
cursor: cell; /* 十字小方格 */
cursor: move; /* 十字箭頭(移動) */
cursor: all-scroll; /* 四方捲動 */
cursor: n-resize; /* 箭頭朝上 */
cursor: s-resize; /* 箭頭朝下 */
cursor: e-resize; /* 箭頭朝右 */
cursor: w-resize; /* 箭頭朝左 */
cursor: nw-resize; /* 箭頭左上 */
cursor: sw-resize; /* 箭頭左下 */
cursor: se-resize; /* 箭頭朝右上 */
cursor: ne-resize; /* 箭頭朝右下 */
cursor: col-resize; /* 改變直行數 */
cursor: row-resize; /* 改變橫欄數 */
cursor: zoom-in; /* 放大 */
cursor: zoom-out; /* 縮小 */
cursor: text; /* I 輸入文字符號 */
cursor: vertical-text; /* 垂直文字 */
cursor: help; /* 協助加一問號 */
cursor: wait; /* 等待中、沙漏、漏斗 */
cursor: progress; /* 進行中;作業中 */
cursor: pointer; /* 表示超連結、手型鼠標 */
cursor: not-allowed; /* 無法使用 */
cursor: grab; /* 抓住 */
cursor: grabbing; /* 抓取 */