怎么用CSS更改鼠標(biāo)樣式
發(fā)表時間:2024-05-08 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]很多時候我們需要吧鼠標(biāo)光標(biāo)和頁面的元素結(jié)合互動,這樣能增加用戶體驗度,那么我們需要怎么用CSS設(shè)置鼠標(biāo)樣式呢?今天就給大家?guī)磉@份教程,怎樣用CSS來修改鼠標(biāo)樣式。我們在DIV CSS布局時候,我們會遇到對對象內(nèi)鼠標(biāo)指針光標(biāo)進(jìn)行控制,比如鼠標(biāo)經(jīng)過指針變?yōu)槭种感螤畹葮邮剑酉聛砦覀兘榻B鼠標(biāo)指針樣式c...
很多時候我們需要吧鼠標(biāo)光標(biāo)和頁面的元素結(jié)合互動,這樣能增加用戶體驗度,那么我們需要怎么用CSS設(shè)置鼠標(biāo)樣式呢?今天就給大家?guī)磉@份教程,怎樣用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)樣式。
擴(kuò)展閱讀:css指針
一、cursor語法與結(jié)構(gòu)
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)為一個小圖片 */。
常用的設(shè)置鼠標(biāo)樣式方法就是這么多,你學(xué)會了嗎?
相關(guān)閱讀:
用css實現(xiàn)css動畫的暫停與播放功能教程
怎樣用CSS加粗字體
怎樣讓css圖片居中顯示
以上就是怎么用CSS修改鼠標(biāo)樣式的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!
網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。