CSS - 遊標屬性

上一頁
下一頁

CSS cursor 屬性決定了滑鼠懸停在應用此屬性的元素上時的外觀。其主要目的是透過視覺方式表示某些功能來提高可用性。

語法

cursor: value;

屬性值

值 描述
auto 顯示的遊標由使用者代理根據當前上下文確定。這是瀏覽器用於定義遊標的預設屬性。
alias 顯示的遊標是別名遊標，表示需要生成別名或快捷方式。
all-scroll 顯示的遊標表示已完成滾動。
cell 顯示的遊標是單元格遊標，表示可以選擇表格單元格或單元格組。
col-resize 顯示的遊標是列調整大小遊標，表示元素或列可能會進行水平調整大小，通常表示為左右指向的箭頭，用垂直線隔開。
copy 顯示的遊標是複製遊標，表示需要建立某個內容的副本。
crosshair 顯示的遊標是十字準星遊標，通常用於指示點陣圖中元素的選擇。
default 預設遊標，根據平臺而異，通常顯示為箭頭。
e-resize 顯示的遊標是南向調整大小遊標，表示南側可以移動或偏移。
ew-resize 顯示的遊標是東西向調整大小遊標，表示雙向調整大小的遊標。
grab 顯示的遊標是抓取遊標，表示可以抓取元素並將其拖動以重新定位。
grabbing 顯示的遊標是抓取遊標，表示正在握住或拉動某物以方便其移動。
help 顯示的遊標是幫助遊標，表示可以訪問幫助資訊。
move 顯示的遊標是移動遊標，表示可以重新定位某物。
n-resize 顯示的遊標是北向調整大小遊標，表示北側可以移動或偏移。
ne-resize 顯示的遊標是東北向調整大小遊標，表示雙向調整大小的遊標。
nw-resize 顯示的遊標是西北向調整大小遊標，表示雙向調整大小的遊標。
ns-resize 顯示的遊標是南北向調整大小遊標，表示雙向調整大小的遊標。
nesw-resize 顯示的遊標是東北西南向調整大小遊標，表示雙向調整大小的遊標。
nwse-resize 顯示的遊標是西北東南向調整大小遊標，表示雙向調整大小的遊標。
no-drop 顯示的遊標是禁止放置遊標，表示可能無法在其當前位置放置專案。
not-allowed 顯示的遊標是禁止遊標，表示不會執行請求的操作。
pointer 顯示的遊標是指標遊標，表示遊標用作指向超連結的指示器。
progress 顯示的遊標是進度遊標，表示程式正在執行後臺任務，允許使用者繼續與介面互動，而不必等待其完成。
row-resize 顯示的遊標是行調整大小遊標，表示元素或行可能會進行垂直調整大小，通常表示為向上和向下指向的箭頭，用水平線隔開。
s-resize 顯示的遊標是南向調整大小遊標，表示南側可以移動或偏移。
se-resize 顯示的遊標是東南向調整大小遊標，表示雙向調整大小的遊標。
sw-resize 顯示的遊標是西南向調整大小遊標，表示雙向調整大小的遊標。
text 顯示的遊標是文字遊標，表示您可以選擇通常由 I 形遊標指示的文字。
URL 顯示的遊標是由逗號分隔的 URL 指定的影像，如果影像無法使用，還必須在 URL 的末尾提供通用遊標。
wait 顯示的遊標是等待遊標，程式當前正忙，使用者無法與介面互動，這種狀態有時用沙漏或手錶影像表示。
w-resize 顯示的遊標是西向調整大小遊標，表示西側可以移動或偏移。
zoom-in 顯示的遊標是放大遊標，表示可以透過縮放放大物件。
zoom-out 顯示的遊標是縮小遊標，表示可以透過縮放縮小物件。

CSS 遊標屬性示例

以下示例演示了具有不同值的cursor 屬性。

所有遊標的演示

以下示例顯示了多個提到的遊標的演示，要觀察效果，請將滑鼠懸停在每個塊上。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: pointer;
      }

      .demo-cursor:hover {
         background-color: lightgrey;
      }

      .default:hover {
         cursor: default;
      }

      .auto {
         cursor: auto;
      }

      .crosshair {
         cursor: crosshair;
      }

      .pointer {
         cursor: pointer;
      }

      .move {
         cursor: move;
      }

      .text {
         cursor: text;
      }

      .wait {
         cursor: wait;
      }

      .help {
         cursor: help;
      }

      .not-allowed {
         cursor: not-allowed;
      }

      .progress {
         cursor: progress;
      }

      .alias {
         cursor: alias;
      }

      .copy {
         cursor: copy;
      }

      .no-drop {
         cursor: no-drop;
      }

      .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;
      }

      .ew-resize {
         cursor: ew-resize;
      }

      .ns-resize {
         cursor: ns-resize;
      }

      .nesw-resize {
         cursor: nesw-resize;
      }

      .nwse-resize {
         cursor: nwse-resize;
      }

      .col-resize {
         cursor: col-resize;
      }

      .row-resize {
         cursor: row-resize;
      }

      .zoom-in {
         cursor: zoom-in;
      }

      .zoom-out {
         cursor: zoom-out;
      }

      .grab {
         cursor: grab;
      }

      .cell {
         cursor: cell;
      }

      .grabbing {
         cursor: grabbing;
      }

      .all-scroll {
         cursor: all-scroll;
      }
    </style>
</head>

<body>
   <h2>
      CSS cursor property
   </h2>
   <h3>
      All CSS Cursors, hover the mouse on the blocks.
   </h3>
   <div class="demo-cursor auto">
      <h3>
         Auto
      </h3>
   </div>
   <div class="demo-cursor alias">
      <h3>
         Alias
      </h3>
   </div>
   <div class="demo-cursor all-scroll">
      <h3>
         All-scroll
      </h3>
   </div>
   <div class="demo-cursor cell">
      <h3>
         cell
      </h3>
   </div>
   <div class="demo-cursor col-resize">
      <h3>
         col-resize
      </h3>
   </div>
   <div class="demo-cursor copy">
      <h3>
         Copy
      </h3>
   </div>
   <div class="demo-cursor crosshair">
      <h3>
         Crosshair
      </h3>
   </div>
   <div class="demo-cursor default">
      <h3>
         Default
      </h3>
   </div>
   <div class="demo-cursor e-resize">
      <h3>
         e-resize
      </h3>
   </div>
   <div class="demo-cursor ew-resize">
      <h3>
         ew-resize
      </h3>
   </div>
   <div class="demo-cursor grab">
      <h3>
         Grab
      </h3>
   </div>
   <div class="demo-cursor grabbing">
      <h3>
         Grabbing
      </h3>
   </div>
   <div class="demo-cursor help">
      <h3>
         Help
      </h3>
   </div>
   <div class="demo-cursor move">
      <h3>
         Move
      </h3>
   </div>
   <div class="demo-cursor n-resize">
      <h3>
         n-resize
      </h3>
   </div>
   <div class="demo-cursor ne-resize">
      <h3>
         ne-resize
      </h3>
   </div>
   <div class="demo-cursor nw-resize">
      <h3>
         nw-resize
      </h3>
   </div>
   <div class="demo-cursor ns-resize">
      <h3>
         ns-resize
      </h3>
   </div>
   <div class="demo-cursor nesw-resize">
      <h3>
         nesw-resize
      </h3>
   </div>
   <div class="demo-cursor nwse-resize">
      <h3>
         nwse-resize
      </h3>
   </div>
   <div class="demo-cursor no-drop">
      <h3>
         No-drop
      </h3>
   </div>
   <div class="demo-cursor not-allowed">
      <h3>
         Not-allowed
      </h3>
   </div>
   <div class="demo-cursor pointer">
      <h3>
         Pointer
      </h3>
   </div>
   <div class="demo-cursor progress">
      <h3>
         Progress
      </h3>
   </div>
   <div class="demo-cursor row-resize">
      <h3>
         row-resize
      </h3>
   </div>
   <div class="demo-cursor s-resize">
      <h3>
         s-resize
      </h3>
   </div>
   <div class="demo-cursor se-resize">
      <h3>
         se-resize
      </h3>
   </div>
   <div class="demo-cursor sw-resize">
      <h3>
         sw-resize
      </h3>
   </div>
   <div class="demo-cursor text">
      <h3>
         Text
      </h3>
   </div>
   <div class="demo-cursor wait">
      <h3>
         Wait
      </h3>
   </div>
   <div class="demo-cursor w-resize">
      <h3>
         w-resize
      </h3>
   </div>
   <div class="demo-cursor zoom-in">
      <h3>
         Zoom-in
      </h3>
   </div>
   <div class="demo-cursor zoom-out">
      <h3>
         Zoom-out
      </h3>
   </div>

</body>

</html>

將影像設定為遊標

影像也可以用作遊標，必須提及所需影像的 URL。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         background-color: lightgrey;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: url(/css/images/try-it.jpg), pointer;
      }
   </style>
</head>

<body>
   <h2>
      CSS cursor property
   </h2>
   <h3>
      Hover over the block
   </h3>
   <div class="demo-cursor">
      <h3>
         Image Cursor
      </h3>
   </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
cursor 5.0 5.5 4.0 5.0 9.6
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告