站長(zhǎng)資訊網(wǎng)在css中可以通過(guò)cursor屬性來(lái)設(shè)置鼠標(biāo)樣式，其實(shí)現(xiàn)方法如：首先創(chuàng)建一個(gè)HTML示例文件；然后定義一些span標(biāo)簽，并給span標(biāo)簽分別添加style屬性；最后通過(guò)設(shè)置不同的cursor屬性值來(lái)實(shí)現(xiàn)不同的鼠標(biāo)樣式即可。
本文操作環(huán)境：宏基S40-51、Windows10 家庭中文版、HTML5&&CSS3&&HBuilderX.3.0.5
推薦：《css視頻教程》
css寫(xiě)鼠標(biāo)樣式
我們?cè)贒IV CSS布局時(shí)候，我們會(huì)遇到對(duì)對(duì)象內(nèi)鼠標(biāo)指針光標(biāo)進(jìn)行控制，比如鼠標(biāo)經(jīng)過(guò)指針變?yōu)槭种感螤畹葮邮剑酉聛?lái)我們介紹鼠標(biāo)指針樣式cursor控制。系統(tǒng)默認(rèn)鼠標(biāo)指針樣式外，可以通過(guò)CSS設(shè)置圖片為鼠標(biāo)指針，常見(jiàn)有些網(wǎng)站鼠標(biāo)指針是各種各樣小圖片樣式，當(dāng)然這個(gè)是通過(guò)css cursor設(shè)置鼠標(biāo)樣式。
1、cursor語(yǔ)法：
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)說(shuō)明
1、div{ cursor:default }默認(rèn)正常鼠標(biāo)指針
2、div{ cursor:hand }和div{ cursor:text } 文本選擇效果
3、div{ cursor:move } 移動(dòng)選擇效果
4、div{ cursor:pointer } 手指形狀 鏈接選擇效果
5、div{ cursor:url(url圖片地址) }設(shè)置對(duì)象為圖片
2、cursor樣式效果圖
3、鼠標(biāo)指針說(shuō)明
cursor設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
4、布局結(jié)構(gòu)
p { cursor: text; } /* css注釋： 設(shè)置鼠標(biāo)移動(dòng)到html p對(duì)象時(shí)鼠標(biāo)變?yōu)槲谋具x擇樣式 */ a { cursor: pointer; } /* css注釋： 設(shè)置鼠標(biāo)移動(dòng)到a超鏈接對(duì)象時(shí)鼠標(biāo)變?yōu)槭种感螤睿ㄦ溄舆x擇） */ body { cursor: url("小圖片地址")} /* 設(shè)置鼠標(biāo)指針默認(rèn)為一個(gè)小圖片 */
一些不同的光標(biāo)的代碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css鼠標(biāo)樣式</title> </head> <body> <p>請(qǐng)把鼠標(biāo)移動(dòng)到單詞上，可以看到鼠標(biāo)指針發(fā)生變化：</p> <span style="cursor:auto">auto：默認(rèn)，瀏覽器設(shè)置的光標(biāo)。</span><br> <span style="cursor:crosshair">crosshair：光標(biāo)呈現(xiàn)為十字線。</span><br> <span style="cursor:default">default：默認(rèn)光標(biāo)（通常是一個(gè)箭頭）</span><br> <span style="cursor:e-resize">e-resize：此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)。</span><br> <span style="cursor:help">help：此光標(biāo)指示可用的幫助（通常是一個(gè)問(wèn)號(hào)或一個(gè)氣球）。</span><br> <span style="cursor:move">move：此光標(biāo)指示某對(duì)象可被移動(dòng)。</span><br> <span style="cursor:n-resize">n-resize：此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)。</span><br> <span style="cursor:ne-resize">ne-resize：此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）。</span><br> <span style="cursor:nw-resize">nw-resize：此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）。</span><br> <span style="cursor:pointer">pointer：光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize：此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）。</span><br> <span style="cursor:se-resize">se-resize：此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）。</span><br> <span style="cursor:sw-resize">sw-resize：此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）。</span><br> <span style="cursor:text">text：此光標(biāo)指示文本。</span><br> <span style="cursor:w-resize">w-resize：此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）。</span><br> <span style="cursor:wait">wait：此光標(biāo)指示程序正忙（通常是一只表或沙漏）。</span><br> </body> </html>
