cursor屬性改變光標形狀的方法

小編給大家分享一下cursor屬性改變光標形狀的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

css3 cursor屬性的基本語法：

cursor: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ];

注：

1、cursor屬性適用于所有元素；

2、cursor屬性僅對具有指針設備（如鼠標）的設備有效；它對觸控設備沒有任何影響。

3、并非所有瀏覽器都支持cursor屬性的所有屬性值，且所有屬性值在所有瀏覽器和操作系統中顯示的效果不一定相同。

下面我們來看看cursor屬性的這些屬性值可以設置怎樣的光標形狀。

圖像游標（自定義游標）

<URI>：

一個或多個逗號分隔的url()用來指向要用作光標的圖像。用戶代理從第一個中檢索游標url()。如果用戶代理無法處理游標列表的第一個游標，則必須嘗試處理游標列表等。如果用戶代理無法處理任何提供的圖像（請參閱瀏覽器支持），則必須使用游標關鍵字。列表的末尾?？蛇x的<x>和<y>坐標標識圖像中指針位置（即熱點）的確切位置。

必須在回退列表的末尾提供 非URL標準游標關鍵字。

<x> <y>：

使用小于32 的無單位數字，不允許使用負值。這些值指定光標熱點的坐標。第一個數字是x坐標，第二個數字是y坐標。

例：

cursor：url（some-cursor .png）2 15，pointer ;

下面我們來看看圖像游標的示例：

css代碼：

.custom {
  cursor: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur), pointer;
}

效果圖：

通用光標（箭頭狀）

default：默認光標，通常箭頭。

auto：根據當前上下文確定要顯示的光標。例如，text當文本懸停時顯示。

none：不為元素呈現光標顯示光標。

例：

.auto {
  cursor: auto;
}

.default {
  cursor: default;
}

.none {
  cursor: none;
}

鏈接和狀態游標

context-menu：光標下的對象可以使用上下文菜單。通常呈現為箭頭，旁邊有一個類似菜單的小圖形。

只有IE 10及更高版本在Windows上實現了這一功能。

help：此光標通常呈現為問號或氣球。它表示光標下的對象可以使用幫助。

pointer：光標是指示鏈接的指針。

progress：進度指標。表示程序正在執行某些處理，但不同之處wait在于用戶仍可以與程序進行交互。通常呈現為旋轉的沙灘球，或帶有手表或沙漏的箭頭。

wait：此光標通常呈現為手表或沙漏。它表示程序正忙，用戶應該等待。

例：

.context-menu {
  cursor: context-menu;
}

.help {
  cursor: help;
}

.pointer {
  cursor: pointer;
}

.progress {
  cursor: progress;
}

.wait {
  cursor: wait;
}

選擇光標

cell：此光標通常呈現為粗加號，中間有一個點。它表示可以選擇一個單元或一組單元。

crosshair：簡單的十字準線（例如，類似于“+”符號的短線段）。通常用于表示二維位圖選擇模式。

text：
   該光標通常呈現為垂直工字梁。用戶代理可以自動顯示vertical-text垂直文本的水平工字梁/光標（例如與關鍵字相同），或者就此而言，任何角度的工字梁/光標用于以任何特定角度渲染的文本。它表示可以選擇的文本。

vertical-text：該光標通常呈現為水平工字梁。它表示可以選擇的垂直文本。

例：

.cell {
  cursor: cell;
}

.crosshair {
  cursor: crosshair;
}

.text {
  cursor: text;
}

.vertical-text {
  cursor: vertical-text;
}

拖放光標

alias：此光標通常呈現為箭頭，旁邊有一個小彎曲箭頭。它表示要創建的某個別名/快捷方式。

copy：此光標通常呈現為箭頭，旁邊有一個小加號。它表明要復制的東西。

move：表示要移動的東西。渲染此光標的方式取決于瀏覽器，如上面的描述中所述。它通常呈現為四向箭頭或類似手的形狀。

no-drop：此光標通常呈現為手形或指針，帶有一個小圓圈，并帶有一條直線。它表示無法在當前光標位置刪除拖動的項目。

not-allowed：此光標通常呈現為一個圓圈，并帶有一條直線。它表示不會執行請求的操作。

例：

.alias {
  cursor: alias;
}

.copy {
  cursor: copy;
}

.move {
  cursor: move;
}

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

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

縮放光標：

zoom-in（放大）、zoom-out（縮?。?/p>

表示某些內容可以放大或縮小，并且通常在玻璃中心呈現為帶有“+”或“ - ”的放大鏡。

例：

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

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

抓取光標

grab 、grabbing：

表示可以抓取元素（拖動以移動）。grab是一只開放的手“準備拖動”，并且dragging是一只看起來像抓住東西的“閉合”手。

例：

.grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

縮放和滾動游標

e-resize，n-resize，ne-resize，nw-resize，s-resize，se-resize，sw-resize，w-resize
   表示要移動某些邊緣。例如，se-resize當運動從開始使用光標東南部盒子的角落。

ew-resize，ns-resize，nesw-resize，nwse-resize
   表示雙向調整大小游標。這些光標類型通常在不同方向上呈現為雙向箭頭。

col-resize：
 此光標通常呈現為左右箭頭，并用垂直條分隔它們。它表示可以水平調整項目/列的大小。它類似于您在MS Excel等程序中看到的光標。

row-resize：
 此光標通常呈現為向上和向下的箭頭，水平條將它們分開。它表示可以垂直調整項目/行的大小。它類似于您在MS Excel等程序中看到的光標。

all-scroll：
此光標通常呈現為向上，向下，向左和向右的箭頭，中間有一個點。它表示可以向任何方向滾動某些內容。

例：

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

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

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

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

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

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

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

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

.se-resize {
  cursor: se-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;
}

.all-scroll {
  cursor: all-scroll;
}

看完了這篇文章，相信你對cursor屬性改變光標形狀的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！