小編給大家分享一下css鼠標(biāo)樣式有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)湖口,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

在css中可以通過cursor屬性來設(shè)置鼠標(biāo)樣式，其實(shí)現(xiàn)方法如：首先創(chuàng)建一個HTML示例文件；然后定義一些span標(biāo)簽，并給span標(biāo)簽分別添加style屬性；最后通過設(shè)置不同的cursor屬性值來實(shí)現(xiàn)不同的鼠標(biāo)樣式即可。

css寫鼠標(biāo)樣式

我們在DIV CSS布局時候，我們會遇到對對象內(nèi)鼠標(biāo)指針光標(biāo)進(jìn)行控制，比如鼠標(biāo)經(jīng)過指針變?yōu)槭种感螤畹葮邮?，接下來我們介紹鼠標(biāo)指針樣式cursor控制。系統(tǒng)默認(rèn)鼠標(biāo)指針樣式外，可以通過CSS設(shè)置圖片為鼠標(biāo)指針，常見有些網(wǎng)站鼠標(biāo)指針是各種各樣小圖片樣式，當(dāng)然這個是通過css cursor設(shè)置鼠標(biāo)樣式。

1、cursor語法：

cursor : auto | crosshair | default | hand | move | help 
| wait | text | w-resize |s-resize | n-resize |e-resize 
| ne-resize |sw-resize | se-resize | nw-resize |pointer 
| url (url)

常用cursor光標(biāo)說明

1、div{ cursor:default }默認(rèn)正常鼠標(biāo)指針

2、div{ cursor:hand }和div{ cursor:text } 文本選擇效果

3、div{ cursor:move } 移動選擇效果

4、div{ cursor:pointer } 手指形狀 鏈接選擇效果

5、div{ cursor:url(url圖片地址) }設(shè)置對象為圖片

2、cursor樣式效果圖

3、鼠標(biāo)指針說明

cursor設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

4、布局結(jié)構(gòu)

p { cursor: text; } /* css注釋： 設(shè)置鼠標(biāo)移動到html p對象時鼠標(biāo)變?yōu)槲谋具x擇樣式 */
a { cursor: pointer; } /* css注釋： 設(shè)置鼠標(biāo)移動到a超鏈接對象時鼠標(biāo)變?yōu)槭种感螤睿ㄦ溄舆x擇） */
body { cursor: url("小圖片地址")} /* 設(shè)置鼠標(biāo)指針默認(rèn)為一個小圖片 */

一些不同的光標(biāo)的代碼示例：

    
    



請把鼠標(biāo)移動到單詞上，可以看到鼠標(biāo)指針發(fā)生變化：
auto：默認(rèn)，瀏覽器設(shè)置的光標(biāo)。

crosshair：光標(biāo)呈現(xiàn)為十字線。

default：默認(rèn)光標(biāo)（通常是一個箭頭）

e-resize：此光標(biāo)指示矩形框的邊緣可被向右（東）移動。

help：此光標(biāo)指示可用的幫助（通常是一個問號或一個氣球）。

move：此光標(biāo)指示某對象可被移動。

n-resize：此光標(biāo)指示矩形框的邊緣可被向上（北）移動。

ne-resize：此光標(biāo)指示矩形框的邊緣可被向上及向右移動（北/東）。

nw-resize：此光標(biāo)指示矩形框的邊緣可被向上及向左移動（北/西）。

pointer：光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）

progress

s-resize：此光標(biāo)指示矩形框的邊緣可被向下移動（南）。

se-resize：此光標(biāo)指示矩形框的邊緣可被向下及向右移動（南/東）。

sw-resize：此光標(biāo)指示矩形框的邊緣可被向下及向左移動（南/西）。

text：此光標(biāo)指示文本。

w-resize：此光標(biāo)指示矩形框的邊緣可被向左移動（西）。

wait：此光標(biāo)指示程序正忙（通常是一只表或沙漏）。

看完了這篇文章，相信你對“css鼠標(biāo)樣式有哪些”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！