css中改變鼠標樣式的方法

這篇文章主要介紹了css中改變鼠標樣式的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

css的基本語法是什么

css的基本語法是：1、css規則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

在css中，可以使用cursor屬性來改變鼠標的樣式，該屬性可以指定鼠標指針放在一個元素邊界范圍內時所用的光標形狀；例如當屬性值為“url(..)”可自定義鼠標樣式，“crosshair”設置十字線樣式，“pointer”設置小手樣式。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中，可以使用cursor屬性來改變鼠標的樣式。

cursor屬性定義了鼠標指針放在一個元素邊界范圍內時所用的光標形狀

注：

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

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

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

示例：

1、圖像游標（自定義游標）

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

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

2、縮放和滾動游標

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屬性的值

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中改變鼠標樣式的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!