舉例說明常用的cursor取值有哪些？

王铁柱6發表於2024-11-29

在前端開發中，cursor CSS 屬性控制滑鼠指標的樣式。常用的 cursor 值有很多，以下是一些例子，並按類別分組：

基本游標:

  • default: 預設游標，通常是一個箭頭。
  • auto: 瀏覽器根據上下文自動選擇合適的遊標。
  • none: 隱藏游標。

文字選擇:

  • text: 文字輸入游標，通常是一個豎線 (I-beam)。
  • vertical-text: 垂直文字輸入游標。

連結選擇:

  • pointer: 手形游標，通常用於連結、可點選元素。
  • help: 問號游標，表示幫助資訊可用。

拖放和調整大小:

  • move: 移動游標，通常是四向箭頭。
  • grab: 抓取游標，表示可以抓取元素。
  • grabbing: 抓取中游標，表示正在抓取元素。
  • crosshair: 十字準星，常用於精確選擇或繪圖。
  • e-resize, w-resize, n-resize, s-resize, ne-resize, nw-resize, se-resize, sw-resize: 調整大小游標，分別表示向東、西、北、南、東北、西北、東南、西南調整大小。
  • ew-resize, ns-resize: 水平和垂直調整大小游標。

等待/忙碌:

  • wait: 等待游標，通常是一個旋轉的圓圈或沙漏。
  • progress: 進度游標，表示正在進行操作，但使用者仍然可以進行互動。

其他:

  • not-allowed: 禁止游標，通常是一個帶有斜線的圓圈。
  • zoom-in: 放大游標，表示可以放大。
  • zoom-out: 縮小游標，表示可以縮小。
  • cell: 單元格選擇游標。
  • context-menu: 上下文選單游標。

使用自定義游標:

除了預定義的值外，還可以使用 url() 指定自定義游標影像：

.element {
  cursor: url('path/to/cursor.png'), auto; /* auto是備用游標 */
}

示例:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
}

#div1 {cursor: pointer;}
#div2 {cursor: move;}
#div3 {cursor: text;}
#div4 {cursor: wait;}
#div5 {cursor: help;}
</style>
</head>
<body>

<div id="div1">pointer</div>
<div id="div2">move</div>
<div id="div3">text</div>
<div id="div4">wait</div>
<div id="div5">help</div>

</body>
</html>

以上只是一些常用的 cursor 值，還有其他一些不太常用的值。 選擇合適的 cursor 值可以提高使用者體驗，並提供清晰的視覺反饋。 建議根據具體場景選擇合適的 cursor 值。

相關文章