css的cursor屬性怎么用

這篇文章給大家分享的是有關(guān)css的cursor屬性怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

西湖ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

首先我們來了解一下cursor屬性是什么？有什么作用？

cursor屬性是css中的光標(biāo)屬性，它指定當(dāng)鼠標(biāo)位于應(yīng)用元素上時可以使用的鼠標(biāo)光標(biāo)類型，即：規(guī)定要顯示的光標(biāo)的類型（形狀）。

我們可以通過cursor屬性將光標(biāo)設(shè)置為許多預(yù)定義光標(biāo)類型之一，或設(shè)置為圖像（如下面的示例）。

注：cursor屬性僅對具有指針設(shè)備（如鼠標(biāo)）的設(shè)備有效。它對觸控設(shè)備沒有任何影響。

cursor屬性用于向用戶提供視覺反饋和提示，以便在元素上傳送某種功能，對于提供更好的用戶體驗通常是重要的。

根據(jù)瀏覽器和操作系統(tǒng)，在CSS中定義的cursor值可以呈現(xiàn)不同的效果。例如，某些瀏覽器（例如Windows 7上的Firefox）將move（通常用于表示元素可拖動）光標(biāo)顯示為四向箭頭，而其他瀏覽器（例如，在Mac OS X上的Firefox）將顯示手形光標(biāo)。在這種情況下，如果你希望光標(biāo)是一個在所有瀏覽器和平臺上看起來完全相同的特定光標(biāo)，你可能需要使用圖像而不是默認(rèn)的CSS關(guān)鍵字。

官方語法

句法：

cursor: [ [<URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit ;

初始：自動

適用于：所有元素

動畫：沒有

新的CSS3語法：

在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、并非所有瀏覽器都支持上述所有的值，并且并非所有值在所有瀏覽器和操作系統(tǒng)中看起來都相同。

2、圖像光標(biāo)（自定義光標(biāo)）

<URI>：引用圖像

一個或多個逗號分隔的url()指向要用作光標(biāo)的圖像。

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

注：必須在回退列表的末尾提供 非URL標(biāo)準(zhǔn)的光標(biāo)關(guān)鍵字。

<x> <y>：定義坐標(biāo)

使用不加單位的數(shù)值，不允許使用負(fù)值；這些值指定光標(biāo)熱點的坐標(biāo)。第一個數(shù)字是x坐標(biāo)，第二個數(shù)字是y坐標(biāo)。例如，以下內(nèi)容：

cursor: url(some-cursor.png) 2 15, pointer;

將光標(biāo)的熱點設(shè)置為從左上角（0,0）開始的（2,15）像素。

如果未指定，則從文件本身（對于CUR和XBM文件）讀取熱點的坐標(biāo)，或者將其設(shè)置為圖像的左上角。

我們來看一個圖像光標(biāo)：

3、常用光標(biāo)形狀

none：定義光標(biāo)不顯示

通常呈現(xiàn)為箭頭：default 、auto、context-menu

通常呈現(xiàn)為手型：pointer、grab、grabbing，hand

help：通常呈現(xiàn)為問號或氣球

等待加載：progress（旋轉(zhuǎn)的沙灘球，或帶有手表或沙漏的箭頭），wait（手表或沙漏）

表示方向或移動：
e-resize、ne-resize 、n-resize 、nw-resize 、w-resize 、 sw-resize 、s-resize 、se-resize、ew-resize 、ns-resize、nesw-resize 、nwse-resize 、col-resize、 row-resize、、all-scroll、move

表示禁止：no-drop 、not-allowed

瀏覽器支持

支持以下版本：

*表示必需的前綴。

感謝各位的閱讀！關(guān)于css的cursor屬性怎么用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當(dāng)前名稱：css的cursor屬性怎么用
文章分享：http://muchs.cn/article14/ghscge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、ChatGPT、手機網(wǎng)站建設(shè)、定制開發(fā)、品牌網(wǎng)站建設(shè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)