建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關css的cursor屬性怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
西湖ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
首先我們來了解一下cursor屬性是什么？有什么作用？
cursor屬性是css中的光標屬性，它指定當鼠標位于應用元素上時可以使用的鼠標光標類型，即：規(guī)定要顯示的光標的類型（形狀）。
我們可以通過cursor屬性將光標設置為許多預定義光標類型之一，或設置為圖像（如下面的示例）。
注：cursor屬性僅對具有指針設備（如鼠標）的設備有效。它對觸控設備沒有任何影響。
cursor屬性用于向用戶提供視覺反饋和提示，以便在元素上傳送某種功能，對于提供更好的用戶體驗通常是重要的。
根據(jù)瀏覽器和操作系統(tǒng)，在CSS中定義的cursor值可以呈現(xiàn)不同的效果。例如，某些瀏覽器（例如Windows 7上的Firefox）將move（通常用于表示元素可拖動）光標顯示為四向箭頭，而其他瀏覽器（例如，在Mac OS X上的Firefox）將顯示手形光標。在這種情況下，如果你希望光標是一個在所有瀏覽器和平臺上看起來完全相同的特定光標，你可能需要使用圖像而不是默認的CSS關鍵字。
官方語法
句法：
cursor: [ [,]* [ 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: [ [[ ]?,]* [ 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、圖像光標（自定義光標）
一個或多個逗號分隔的url()指向要用作光標的圖像。
cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;
注：必須在回退列表的末尾提供 非URL標準的光標關鍵字。
使用不加單位的數(shù)值，不允許使用負值；這些值指定光標熱點的坐標。第一個數(shù)字是x坐標，第二個數(shù)字是y坐標。例如，以下內(nèi)容：
cursor: url(some-cursor.png) 2 15, pointer;
將光標的熱點設置為從左上角（0,0）開始的（2,15）像素。
如果未指定，則從文件本身（對于CUR和XBM文件）讀取熱點的坐標，或者將其設置為圖像的左上角。
我們來看一個圖像光標：
3、常用光標形狀
none：定義光標不顯示
通常呈現(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
瀏覽器支持
支持以下版本：
*表示必需的前綴。
感謝各位的閱讀！關于css的cursor屬性怎么用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
網(wǎng)頁標題：css的cursor屬性怎么用
網(wǎng)站路徑：http://fisionsoft.com.cn/article/ghscge.html
