css教你怎么設(shè)置cursor鼠標(biāo)指針光標(biāo)樣式

2022-06-12發(fā)布者:ylm大?。?/span> 下載:0

文件大小:

軟件介紹

一、cursor語法與結(jié)構(gòu)   -   TOP

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 } 移動(dòng)選擇效果
4)、div{ cursor:pointer } 手指形狀 鏈接選擇效果
5)、div{ cursor:url(url圖片地址) }設(shè)置對象為圖片

2、cursor樣式效果圖

image.png

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

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

擴(kuò)展閱讀:css a、css a link、a hover、css超鏈接樣式

二、鼠標(biāo)指針樣式總結(jié)   -   TOP

鼠標(biāo)指針樣式控制設(shè)置是比較常用的,比如日常我們在DIV+CSS布局時(shí)候,我們希望鼠標(biāo)指向某個(gè)局部span標(biāo)簽對象時(shí)候,鼠標(biāo)指針光標(biāo)就變?yōu)槭种笭顟B(tài),這個(gè)時(shí)候我們就對對象span設(shè)置cursor: pointer即可。以上我們圖例展示常用的鼠標(biāo)光標(biāo)形狀與css單詞,希望布局時(shí)候更加自身需要選擇設(shè)置鼠標(biāo)指針樣式。需要注意是,光標(biāo)切記勿濫用,也不要輕易設(shè)置自定義圖片為鼠標(biāo)樣式這樣會(huì)將網(wǎng)頁造成復(fù)雜與不符合用戶體驗(yàn)感覺,切記光標(biāo)慎用。


發(fā)表評(píng)論(共0條評(píng)論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī),評(píng)論內(nèi)容只代表網(wǎng)友觀點(diǎn),發(fā)表審核后顯示!

版權(quán)聲明:

1 本站所有資源(含游戲)均是軟件作者、開發(fā)商投稿,任何涉及商業(yè)盈利目的均不得使用,否則產(chǎn)生的一切后果將由您自己承擔(dān)!

2 本站將不對任何資源負(fù)法律責(zé)任,所有資源請?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線投稿、無法下載等問題,請與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等,請立刻聯(lián)系我們并具體說明情況后,本站將盡快處理刪除,聯(lián)系QQ:2499894784

返回頂部