鼠标光标图示 ( 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 操作吧。

意见反馈