【CSS: cursor】滑鼠游標指標樣式大全

瀏覽器內建指標樣式：

標了紅色 * 號的為我認為的常用指標樣式。

cursor: auto; （預設值）	瀏覽器根據當前內容自動決定指標樣式； 例如當內容是文字時使用 text 樣式
cursor: default;	預設指標，通常是箭頭。
cursor: none;	不渲染指標！
cursor: context-menu;	(該指標經測試沒效果？)指標下有可用內容目錄。配套使用案例如下： 【html+js+css】前端瀏覽器自定義 右鍵選單顯示_oumae-kumiko的部落格-CSDN部落格
cursor: help;	* 指示幫助。
cursor: pointer;	* 懸浮於該元素上時，通常為手。
cursor: progress;	程式後臺繁忙，使用者仍可互動 (與wait 相反).
cursor: wait;	* 程式繁忙，使用者不可互動 (與progress 相反).圖示一般為沙漏或者表。
cursor: cell;	指示單元格可被選中
cursor: crosshair;	* 交叉指標，通常指示點陣圖中的框選
cursor: text;	指示文字可被選中
cursor: vertical-text;	指示垂直文字可被選中
cursor: alias;	複製或快捷方式將要被建立
cursor: copy;	指示可複製
cursor: move;	* 被懸浮的物體可被移動
cursor: no-drop;	* 當前位置不能扔下
cursor: not-allowed;	* 不能執行
cursor: grab;	可抓取
cursor: grabbing;	抓取中
cursor: all-scroll;	元素可任意方向滾動（平移）
cursor: col-resize;	* 元素可被重設寬度。通常被渲染為中間有一條豎線分割的左右兩個箭頭
cursor: row-resize;	* 元素可被重設高度。通常被渲染為中間有一條橫線分割的上下兩個箭頭
cursor: zoom-in;	* 指示可被放大或縮小
cursor: zoom-out;	* 指示可被放大或縮小
cursor: ns-resize;	* 指示高雙向重新設定大小
cursor: ew-resize;	* 指示寬雙向重新設定大小
cursor: nwse-resize;	* 指示寬、高雙向重新設定大小（左上、右下）
cursor: nesw-resize;	* 指示寬、高雙向重新設定大小（右上、左下）

---

其他屬性：

/* 全域性屬性 */cursor: inherit;cursor: initial;cursor: unset;

---

url() ： 自定義滑鼠指標！

除了瀏覽器提供的滑鼠樣式，我們還可以藉助 cursor: url() 的特性，即可實現定製自己的滑鼠樣式！

/* 使用 URL，並提供一個關鍵字值作為備用 */cursor: url(hand.cur), pointer; /* URL 和 xy 的座標偏移值，最後提供一個關鍵字值作為備用 */cursor:  url(cursor1.png) 4 12, auto;cursor:  url(cursor2.png) 2 2, pointer;

cursor 屬性為零個或多個值，多個url()的時候它們之間用逗號分隔，最後必填一個cursor的關鍵字值。每個指向一個影像檔案。瀏覽器將嘗試載入指定的第一個影像，如果無法載入則繼續載入下一個影像，如果都無法載入影像或未指定影像，則使用關鍵字值代表的指標型別。

每個後面都可選跟一對空格分隔的數字表示偏移。它們用來設定指標的熱點 (即自定義圖示的實際點選位置)，位置相對於圖示的左上角。

多 `url()` 例子：

cursor: url(one.svg), url(two.svg) 5 5, progress;

<url>
url(…)或者逗號分隔的url(…), url(…), …，指向圖片檔案。用大於一個值提供後備，以防某些指標圖片型別不被支援。最後必須提供一個非 URL 後備值。

<x> <y>
可選 x，y 座標。兩個小於 32 的無單位非負數。

自定義、定製滑鼠指標例子：

【css】自定義滑鼠游標指標樣式-前端_oumae-kumiko的部落格-CSDN部落格

本文轉自 https://blog.csdn.net/lijiahui_/article/details/130946684，如有侵權，請聯絡刪除。