CSS cursor 滑鼠游標樣式：pointer 手指與常用屬性整理

在前端網頁開發中，css cursor 屬性用來控制當滑鼠移到元素上方時所顯示的鼠標樣式（游標圖示）。給予正確的游標回饋（例如可點擊按鈕顯示手指 pointer、停用按鈕顯示禁止符號 not-allowed），能讓使用者一眼判斷該區塊的互動狀態。

以下表格彙整最常用的 css cursor 屬性值與對應的視覺效果。

---

CSS cursor 常用鼠標樣式總表

CSS cursor 說明	屬性語法	常見互動應用場景
手指點擊樣式（最常用）	cursor: pointer;	按鈕、超連結、卡片、可點擊展開的元件
禁止點擊 / 停用樣式	cursor: not-allowed;	已停用（disabled）的按鈕、無權限點擊的選項
一般預設箭頭	cursor: default;	一般區塊或強制取消超連結的手指游標
自動判斷（預設值）	cursor: auto;	由瀏覽器依元素類型自動決定游標
文字選取（I 型游標）	cursor: text;	輸入框、文章段落、可複製的文字區域
垂直文字選取	cursor: vertical-text;	直書排版（writing-mode: vertical-rl）文字區
張開手掌（可抓取拖曳）	cursor: grab;	輪播圖、看板卡片、地圖等提示「可按住拖曳」的區塊
握緊手掌（拖曳中）	cursor: grabbing;	搭配 :active 在滑鼠按住拖曳期間顯示握拳游標
十字移動符號（四向箭頭）	cursor: move;	可自由移動位置的浮動視窗或畫布物件
問號提示樣式	cursor: help;	提示詞（Tooltip）、欄位說明小圖示
轉圈圈 / 載入中樣式	cursor: wait;（或 progress）	表單送出處理中、非同步資料讀取中
十字準心符號	cursor: crosshair;	圖片裁切工具、選取座標或繪圖畫布
加號 / 表格儲存格十字	cursor: cell;	試算表類型的儲存格選取
複製符號（附帶 + 號）	cursor: copy;	拖放複製物件
捷徑符號（附帶彎曲箭頭）	cursor: alias;	建立捷徑或外部連結提示
放大鏡（放大 / 縮小）	cursor: zoom-in; / zoom-out;	商品圖片點擊放大燈箱預覽
隱藏游標（不顯示）	cursor: none;	全螢幕影片播放器、網頁遊戲畫布

---

快速複製 CSS cursor 常用語法

1. 手指點擊與禁用狀態（按鈕必備組合）

/* 可點擊按鈕：顯示手指游標 */
.btn {
  cursor: pointer;
}

/* 停用按鈕：顯示紅色禁止符號 */
.btn:disabled,
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

2. 拖曳互動組合（張開手掌 grab ➔ 握緊手掌 grabbing）

.draggable-card {
  cursor: grab;
}

.draggable-card:active {
  cursor: grabbing;
}

3. 一般箭頭、文字選取與隱藏游標

/* 一般箭頭 */
.cursor-default {
  cursor: default;
}

/* 文字選取 I 型游標 */
.cursor-text {
  cursor: text;
}

/* 垂直文字選取 */
.cursor-vertical-text {
  cursor: vertical-text;
}

/* 隱藏滑鼠游標 */
.cursor-none {
  cursor: none;
}

4. 狀態提示與工具類游標（問號、載入中、十字、移動、複製）

/* 問號說明 */
.cursor-help {
  cursor: help;
}

/* 轉圈圈 / 載入中 */
.cursor-wait {
  cursor: wait;
}

/* 表格加號 / 急救十字 */
.cursor-cell {
  cursor: cell;
}

/* 精準十字準心 */
.cursor-crosshair {
  cursor: crosshair;
}

/* 四向移動箭頭 */
.cursor-move {
  cursor: move;
}

/* 捷徑符號 */
.cursor-alias {
  cursor: alias;
}

/* 複製符號 */
.cursor-copy {
  cursor: copy;
}

---

進階技巧：使用自訂圖片作為滑鼠游標（cursor: url()）

如果想把滑鼠游標換成網站專屬的小圖示（建議尺寸 32x32 px 以內的 PNG 或 SVG），可以使用 url()，並在結尾務必補上一個備用游標關鍵字（例如 auto 或 pointer），避免圖片載入失敗時無游標可用：

.custom-cursor-area {
  /* 語法：url(圖片路徑) X軸熱點座標 Y軸熱點座標, 備用游標 */
  cursor: url('/images/custom-cursor.png') 4 4, pointer;
}

---

參考資料

• MDN Web Docs: cursor