css鼠標(biāo)樣式語(yǔ)法及20種可選值(屬性)

2022-05-19 15:58 更新

我們對(duì)Windows各種各樣的鼠標(biāo)樣式都不陌生,當(dāng)鼠標(biāo)移動(dòng)到不同的地方時(shí),當(dāng)鼠標(biāo)執(zhí)行不同的功能時(shí),當(dāng)系統(tǒng)處于不同的狀態(tài)時(shí),都會(huì)使鼠標(biāo)的形狀發(fā)生變化。而在網(wǎng)頁(yè)上往往只有當(dāng)鼠標(biāo)在超級(jí)鏈接上時(shí)才出現(xiàn)一個(gè)手形,在其它地方似乎沒有什么變化,同充滿動(dòng)感的網(wǎng)頁(yè)顯得不怎么和諧。這里教大家用CSS來(lái)定義20種種鼠標(biāo)樣式形狀。在CSS中,使用cursor屬性來(lái)定義鼠標(biāo)的樣式。


用css控制鼠標(biāo)樣式的語(yǔ)法如下:

<span style="cursor:*">文本或其它頁(yè)面元素</span>

把 * 換成如下20個(gè)可選值的一種:

cursor屬性取值如下,默認(rèn)值為default。大家可能會(huì)說,cursor屬性值這么多,怎么記呀?其實(shí)大家不用擔(dān)心,在實(shí)際開發(fā)中,我們一般只用到“default”和“pointer”這兩個(gè)屬性值,其他的一般都很少用得上。如果實(shí)在沒辦法還需要其他的,那就回來(lái)查這種表就行了。

crosshair;


十字準(zhǔn)心

The cursor render as a crosshair

光標(biāo)表現(xiàn)為十字準(zhǔn)線

cursor: pointer; 
cursor: hand;
寫兩個(gè)是為了照顧IE5,它只認(rèn)hand。

 

The cursor render as a pointer (a hand) that indicates a link

光標(biāo)標(biāo)以暗示(手指)的形式來(lái)表明有一個(gè)連接

cursor: wait;

 

等待/沙漏

The cursor indicates that the program is busy (often a watch or an hourglass)
光標(biāo)暗示當(dāng)前程序正忙(一般為一塊表或是一個(gè)沙漏)

cursor: help;

 

幫助

The cursor indicates that help is available (often a question mark or a balloon)
光標(biāo)暗示當(dāng)前位置可得到幫助(一般為問號(hào)或是氣球)

cursor: no-drop;

 

無(wú)法釋放

cursor: no-drop;

cursor: text;

 

文字/編輯

The cursor indicates text
光標(biāo)暗示當(dāng)前所處位置為文字內(nèi)容

cursor: move;

 

可移動(dòng)對(duì)象

The cursor indicates something that should be moved
光標(biāo)暗示一些東西應(yīng)該被移動(dòng)

cursor: n-resize;

 

向上改變大小(North)

The cursor indicates that an edge of a box is to be moved up (north)
邊緣可向上移動(dòng)(北)

cursor: s-resize;

 

向下改變大小(South)

The cursor indicates that an edge of a box is to be moved down (south)
邊緣可向下方移動(dòng)(南)

cursor: e-resize;

 

向右改變大小(East)

The cursor indicates that an edge of a box is to be moved right (east)
box邊緣可向右(東)邊移動(dòng)

cursor: w-resize;


向左改變大小(West)

The cursor indicates that an edge of a box is to be moved left (west)
邊緣可向左移動(dòng)(西)

cursor: ne-resize;

 

向上右改變大小(North East)

The cursor indicates that an edge of a box is to be moved up and right (north/east)
光標(biāo)暗示box的邊緣可向右上方移動(dòng)(東北方向)

cursor: nw-resize;

 

向上左改變大小(North West)

The cursor indicates that an edge of a box is to be moved up and left (north/west)
邊緣可向左上方移動(dòng)(西北)

cursor: se-resize;

 

向下右改變大小(South East)

The cursor indicates that an edge of a box is to be moved down and right (south/east)
邊緣可向右下方移動(dòng)(東南)

cursor: sw-resize;

 

向下左改變大小(South West)

The cursor indicates that an edge of a box is to be moved down and left (south/west)
邊緣可向左下方移動(dòng)(西南)

cursor: auto;

 

自動(dòng)

The browser sets a cursor
瀏覽器設(shè)置一個(gè)光標(biāo)

cursor:not-allowed;

 

禁止

cursor:not-allowed;

cursor: progress;

 

處理中

cursor: progress;

cursor: default;

 

系統(tǒng)默認(rèn)

The default cursor (often an arrow)
默認(rèn)的光標(biāo)狀態(tài)(通常為一個(gè)箭頭)

cursor: url(' # ');
# = 光標(biāo)文件地址      (注意文件格式必須為:.cur 或 .ani)。

 

用戶自定義(可用動(dòng)畫)

The url of a custom cursor to be used.
自定義光標(biāo)的url位置

Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used
注意:在定義完自定義的光標(biāo)之后在末尾加上一般性的光標(biāo),以防那些url所定義的光標(biāo)不能使用


cursor的pointer與hand區(qū)別

cursor:hand 與 cursor:pointer 的效果是一樣,都像手形光標(biāo)。那為什么有兩個(gè)呢,這兩個(gè)有什么區(qū)別呢?

用瀏覽器測(cè)試得出以下結(jié)論:
cursor:hand :IE完全支持。但是在 firefox 是不支持的,沒有效果。
cursor:pointer :是 CSS2.0 的標(biāo)準(zhǔn)。所以 firefox 是支持的,但是 IE5.0 既之前版本不支持。IE6 開始支持。
所以為了兼容各個(gè)主流瀏覽器,盡量使用 cursor:pointer,而不要使用 cursor:hand。

實(shí)例:

實(shí)例

#div_default{cursor:default;}

#div_pointer{cursor:pointer;}


嘗試一下 ?
在瀏覽器預(yù)覽效果如下:

css鼠標(biāo)樣式

CSS Cursor鼠標(biāo)指針樣式兼容性參考表

下面分享一個(gè)鼠標(biāo)指針樣式兼容性在線參考表,黑色圖標(biāo):表示該屬性兼容此瀏覽器。灰色圖標(biāo):表示該屬性不兼容此瀏覽器。

CSS Cursor兼容表


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)