CSS cursor 滑鼠游標樣式整理：pointer、not-allowed 等常用值與自訂游標寫法

滑鼠移到連結上會變成手指、移到文字上會變成 I 字形，這是瀏覽器依照 CSS 的 cursor 屬性決定的。自己做的按鈕、可以拖曳的區塊、暫時不能按的選項，也可以用 cursor 換成適合的游標，讓訪客一看就知道「這裡可以點」或「這裡不能按」。

基本寫法

.help-text {
  cursor: help;
}

把 help 換成下面任何一個值就可以。實際的游標圖案由作業系統決定，Windows 和 Mac 看起來會有點不一樣。

常用的游標值

最常用

• auto：預設值，瀏覽器依內容自動決定（文字上是 I 字形、連結上是手指）。
• default：一般的箭頭。
• pointer：手指，代表「可以點」，用在連結、按鈕。
• text：I 字形，代表可以選取文字。
• not-allowed：禁止符號，用在停用的按鈕。
• wait：忙碌中，代表程式正在處理、暫時不能操作。
• progress：箭頭加上忙碌圖示，代表背景還在處理，但可以繼續操作。
• help：箭頭加上問號，用在有說明提示的地方。

拖曳、移動

• move：代表可以移動。
• grab：張開的手，代表可以抓住拖曳。
• grabbing：握住的手，用在拖曳進行中。

縮放、選取

• zoom-in、zoom-out：放大鏡，用在點了可以放大、縮小的圖片。
• crosshair：十字準星，用在需要精確選取位置的地方。
• cell：選取表格儲存格。
• copy、alias：代表拖過去會複製、會建立捷徑。
• context-menu：代表這裡有選單可以打開。

調整大小

• n-resize、s-resize、e-resize、w-resize：往上、下、右、左單一方向調整（n、s、e、w 是北、南、東、西）。
• ne-resize、nw-resize、se-resize、sw-resize：往四個斜角調整。
• ew-resize、ns-resize：左右、上下雙向箭頭。
• col-resize、row-resize：調整欄寬、列高。

其他

• none：隱藏游標。
• inherit：跟外層元素的設定一樣。

什麼時候該換游標？

自己做的可點擊元素

用 div、span 做成可以點的卡片時，記得加上 cursor: pointer。不過更好的做法是直接用 a 或 button 標籤，用鍵盤也能操作。

按鈕預設不是手指

很多人不知道：瀏覽器預設的 button 游標是箭頭，不是手指。想要按鈕、送出鈕統一顯示手指，可以加：

button,
[type="submit"],
label[for] {
  cursor: pointer;
}

停用的按鈕

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

不要亂換

一般文字、不能點的圖片不要用 pointer。訪客看到手指會以為可以點，點了沒反應，反而覺得網站壞了。

自訂游標圖片

.custom-cursor {
  cursor: url("images/cursor.png") 4 4, pointer;
}

• url() 裡放游標圖片的路徑，常用的是 PNG，也可以用 Windows 的 .cur 游標檔。
• 4 4 是「熱點」座標，也就是游標實際點擊的位置，從圖片左上角算起往右、往下各幾個像素。箭頭類的圖片通常設在尖端。
• 最後一定要接一個一般的游標值（例如 pointer、auto），圖片載入失敗時才有備用的游標。少了這個備用值，整行設定都會失效。
• 圖片建議 32×32 像素左右，太大的圖片瀏覽器可能不會顯示。

自訂游標好玩，但不建議整個網站都換：跟訪客的使用習慣不同，容易找不到滑鼠在哪、分不清哪裡能點。比較適合用在活動頁、小遊戲這類局部的區塊。

常見問題

設了 cursor 沒有效果？

• 選擇器沒選到：按 F12 打開開發者工具，點選那個元素，看 cursor 有沒有被其他規則蓋掉（被劃掉的就是沒生效）。
• 上面蓋著一層透明元素：例如絕對定位的遮罩，游標會吃上面那一層的設定。如果遮罩本身不需要被點，可以在遮罩加上 pointer-events: none，讓滑鼠穿過它。
• 自訂圖片沒出現：檢查路徑是否正確、最後有沒有備用值、圖片是不是太大。

手機上看不到游標？

手機、平板用手指觸控，沒有滑鼠游標，cursor 只影響電腦。所以不要把「游標變成手指」當成唯一的提示，按鈕本身的顏色、形狀，連結的底線或顏色，也要讓人一眼看出可以點。

延伸閱讀

• 點連結出現外框怎麼拿掉？用 :focus-visible 取代 outline: none 的正確寫法
• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
• HTML 加入 CSS 的三種方法：外部樣式表、內部樣式表、行內樣式怎麼選

游標、按鈕狀態這些小細節，決定了訪客用起來順不順手。正威網路行銷是基隆在地、25 年經驗的基隆網頁設計工作室，也服務台北與全台客戶，想讓網站在電腦、手機上都好用，歡迎來聊聊。