滑鼠游標圖示 cursor

在一個網頁裡，通常只有超連結、選取或調整尺寸時，會出現「游標」圖示不同的狀態，除此之外，也可以透過 cursor 樣式屬性，設定滑鼠與元素互動時的游標圖示，這篇教學會透過 CSS cursor 的關鍵字改變滑鼠游標圖示，還會透過 url() 使用自訂圖片當作游標。

快速導覽：

• cursor 關鍵字更換滑鼠游標圖示
• cursor url 自訂滑鼠游標圖示

cursor 關鍵字更換滑鼠游標

cursor 可以設定滑鼠和元素發生互動時的「游標圖案」，具有繼承特性 通常會用「關鍵字」更換游標圖示，撰寫語法如下：

div {
  cursor: 游標關鍵字;
}

下方列出所有 cursor 關鍵字在 Windows 與 Mac 作業系統的呈現方式：

下方範例會呈現所有 cursor 關鍵字效果，將滑鼠移動到關鍵字上方就可以觀察效果。

線上展示：https://codepen.io/oxxo/pen/XJrpmew

<!-- HTML 程式碼 -->
<div class="default">default</div>
<div class="context-menu">context-menu</div>
<div class="help">help</div>
<div class="pointer">pointer</div>
<div class="progress">progress</div>
<div class="wait">wait</div>
<div class="cell">cell</div>
<div class="crosshair">crosshair</div>
<div class="text">text</div>
<div class="vertical-text">vertical-text</div>
<div class="alias">alias</div>
<div class="copy">copy</div>
<div class="move">move</div>
<div class="no-drop">no-drop</div>
<div class="not-allowed">not-allowed</div>
<div class="all-scroll">all-scroll</div>
<div class="zoom-in">zoom-in</div>
<div class="zoom-out">zoom-out</div>
<div class="grab">grab</div>
<div class="grabbing">grabbing</div>
<div class="e-resize">e-resize</div>
<div class="n-resize">n-resize</div>
<div class="ne-resize">ne-resize</div>
<div class="nw-resize">nw-resize</div>
<div class="s-resize">s-resize</div>
<div class="se-resize">se-resize</div>
<div class="sw-resize">sw-resize</div>
<div class="w-resize">w-resize</div>
<div class="nesw-resize">nesw-resize</div>
<div class="nwse-resize">nwse-resize</div>
<div class="col-resize">col-resize</div>
<div class="row-resize">row-resize</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 120px;
    padding: 10px;
    border: 1px solid #000;
    margin: 10px;
    float: left;
  }
  div:hover {background: yellow;}
  .default { cursor: default; }
  .context-menu { cursor: context-menu; }
  .help { cursor: help; }
  .pointer { cursor: pointer; }
  .progress { cursor: progress; }
  .wait { cursor: wait; }
  .cell { cursor: cell; }
  .crosshair { cursor: crosshair; }
  .text { cursor: text; }
  .vertical-text { cursor: vertical-text; }
  .alias { cursor: alias; }
  .copy { cursor: copy; }
  .move { cursor: move; }
  .no-drop { cursor: no-drop; }
  .not-allowed { cursor: not-allowed; }
  .all-scroll { cursor: all-scroll; }
  .zoom-in { cursor: zoom-in; }
  .zoom-out { cursor: zoom-out; }
  .grab { cursor: grab; }
  .grabbing { cursor: grabbing; }
  .e-resize { cursor: e-resize; }
  .n-resize { cursor: n-resize; }
  .ne-resize { cursor: ne-resize; }
  .nw-resize { cursor: nw-resize; }
  .s-resize { cursor: s-resize; }
  .se-resize { cursor: se-resize; }
  .sw-resize { cursor: sw-resize; }
  .w-resize { cursor: w-resize; }
  .nesw-resize { cursor: nesw-resize; }
  .nwse-resize { cursor: nwse-resize; }
  .col-resize { cursor: col-resize; }
  .row-resize { cursor: row-resize; }
</style>

cursor url 自訂滑鼠游標圖片

除了透過關鍵字可以變更游標圖示，cursor 也可以使用「url」語法讓游標呈現自訂的圖案，語法具有幾種特色：

• 預設圖片左上角會對齊原本滑鼠游標箭頭的尖端。
• 如果加入 x、y 參數，可以改變圖片位置。
• x y 參數本身是「像素」單位，不需要加上任何單位。
• x y 參數數值限制在「0～圖片長或寬」，超過範圍就會等於 0 或圖片的長或寬。
• 設定 x y 參數後圖片會往左和往上移動。
• 支援彩色圖案與游標 cur 檔案。

下方列出兩種撰寫語法：

div {
  cursor: url('圖片網址'), auto;      /* 滑鼠游標箭頭尖端為圖片的左上角 */
  cursor: url('圖片網址') x y, auto;  /* 圖片往左或往上位移多少像素 */
}

下方範例會讓兩個 div 使用 cursor 的 url 寫法，讓滑鼠呈現自訂游標，因為使用的圖片尺寸為 64x64，所以透過 x y 參數讓圖片中心點對齊滑鼠尖端。

線上展示：https://codepen.io/oxxo/pen/OPLWvvj

<!-- HTML 程式碼 -->
<div class="a">我是地圖游標</div>
<div class="b">我是彩色電話游標</div>


<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: 10px;
  }
  .a {
    cursor: url('https://steam.oxxostudio.tw/download/css/cursor-demo.png') 32 32, auto;
  }
  .b {
    cursor: url('https://steam.oxxostudio.tw/download/css/cursor-color-demo.png') 32 32, auto;
  }
</style>

小結

過去要讓滑鼠使用自訂圖案，往往會透過 JavaScript 來操作，由於瀏覽器幾乎都支援 CSS cursor 自訂圖案，透過 CSS 來實現這種效果會更加高效又便利，如果有相關需求不妨改用 CSS 操作吧。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～