CSS 滑鼠游標圖案

CSS 教學  >  滑鼠游標圖案

在某些網站上，我們會看到不同的滑鼠游標圖案。這是由 cursor 屬性來設定的。

以下列出一些常見的滑鼠游標圖案，以及它們設定的方式 (請將滑鼠置於顯現結果的欄位，您將可以看到該滑鼠游標的圖案)：

CSS 樣式	顯現結果
{ cursor: crosshair; }	滑鼠游標圖案是 crosshair
{ cursor: pointer; }	滑鼠游標圖案是 pointer
{ cursor: text; }	滑鼠游標圖案是 text
{ cursor: move; }	滑鼠游標圖案是 move
{ cursor: wait; }	滑鼠游標圖案是 wait
{ cursor: help; }	滑鼠游標圖案是 help
{ cursor: progress; }	滑鼠游標圖案是 progress
{ cursor: not-allowed; }	滑鼠游標圖案是 not-allowed
{ cursor: no-drop; }	滑鼠游標圖案是 no-drop
{ cursor: no-vertical-text; }	滑鼠游標圖案是 no-vertical-text
{ cursor: all-scroll; }	滑鼠游標圖案是 all-scroll
{ cursor: col-resize; }	滑鼠游標圖案是 col-resize
{ cursor: row-resize; }	滑鼠游標圖案是 row-resize
{ cursor: e-resize; }	滑鼠游標圖案是 e-resize
{ cursor: ne-resize; }	滑鼠游標圖案是 ne-resize
{ cursor: n-resize; }	滑鼠游標圖案是 n-resize
{ cursor: nw-resize; }	滑鼠游標圖案是 nw-resize
{ cursor: w-resize; }	滑鼠游標圖案是 w-resize
{ cursor: sw-resize; }	滑鼠游標圖案是 sw-resize
{ cursor: s-resize; }	滑鼠游標圖案是 s-resize
{ cursor: se-resize; }	滑鼠游標圖案是 se-resize

我們也可以自定游標圖案。自定圖案的語法是：

{ cursor: url(圖案網址); }