在 CSS 中將游標更改為手形指標

在可供使用者操作的元素上設定 cursor: pointer;，即可在游標移至元素上方時顯示熟悉的手形游標。連結通常已使用這種游標；按鈕或自訂互動控制項也適用相同規則。請用它強化操作提示，不要讓裝飾性元素看起來像可點擊項目。

將 CSS 的 cursor 屬性設為 pointer

將這項宣告加到連結、按鈕或其他互動元素的選擇器中。以下 JavaScript 範例會輸出按鈕所用的 CSS 規則，您可以將它複製到樣式表。輸出內容就是規則文字。

const rule = "button { cursor: pointer; }";
console.log(rule);

button { cursor: pointer; }

這個完整頁面也示範如何在連結和按鈕上套用此規則。HTML 範例中連結、按鈕與區段的可見文字維持英文。請依照自己的標記調整選擇器。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pointer cursor example</title>
  <style>
    a,
    button {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a href="#details">View details</a>
  <button type="button">Show details</button>
  <section id="details">
    <h1>Details</h1>
    <p>This section is the destination of the View details link.</p>
  </section>
</body>
</html>

pointer 是 CSS 中代表手形游標的關鍵字。具有有效 href 的連結通常預設會顯示這種游標，因此一般連結往往不需要明確設定規則。按鈕也是互動控制項；套用此規則可讓它提供與連結一致的提示。若自訂元素會回應點擊，請同時提供適當的語意與鍵盤操作方式；單靠游標樣式無法讓元素具備無障礙性或互動功能。

請選擇只會套用到可執行操作之控制項的選擇器。例如，套用全站的 button 規則會涵蓋原生按鈕，而 .open-panel 這類別則可指定單一自訂控制項。避免將 pointer 套用到所有元素，或只看起來像控制項的文字：這種視覺提示會讓使用者預期該元素可以操作。請透過連結或按鈕提供實際操作，並將游標樣式作為輔助提示。如果其他 CSS 規則覆蓋了這項宣告，請檢查樣式表中符合條件的選擇器及其層疊順序。

使用自訂游標圖片並設定後備值

若要使用圖片取代瀏覽器的標準手形游標，請將 cursor 值設為 url()，後面再接一個後備關鍵字。例如，cursor: url("/images/hand-cursor.png"), pointer; 會要求瀏覽器使用 /images/hand-cursor.png；若圖片無法載入或使用，則改用 pointer。請將圖片放在網站中的該路徑，或將 URL 改為圖片的實際位置。外部樣式表中的相對 URL 會以該樣式表為基準解析，而內嵌 CSS 中的 URL 則以文件的基礎 URL 為基準解析，因此路徑不存在或不正確時，自訂圖片就不會顯示；後備值仍會提供標準手形游標。如果希望元素使用瀏覽器通常採用的游標，也可以用 auto 作為後備值。請保留宣告中的後備值，讓圖片無法使用時，使用者仍能看到明確的游標提示。