当前位置 - 股票行情交易網 - 文娛動態 - 怎麽用CSS修改鼠標樣式

怎麽用CSS修改鼠標樣式

很多時候我們需要吧鼠標光標和頁面的元素結合互動,這樣能增加用戶體驗度,那麽我們需要怎麽用CSS設置鼠標樣式呢?今天就給大家帶來這份教程,怎樣用CSS來修改鼠標樣式。

我們在DIV CSS布局時候,我們會遇到對對象內鼠標指針光標進行控制,比如鼠標經過指針變為手指形狀等樣式,接下來我們介紹鼠標指針樣式cursor控制。系統默認鼠標指針樣式外,可以通過CSS設置圖片為鼠標指針,常見有些網站鼠標指針是各種各樣小圖片樣式,當然這個是通過css cursor設置鼠標樣式。

擴展閱讀:css指針

壹、cursor語法與結構

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光標說明

1)、div{ cursor:default }默認正常鼠標指針

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

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

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

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

2、cursor樣式效果圖

3、鼠標指針說明

cursor設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

4、布局結構

p { cursor: text; } /* css註釋: 設置鼠標移動到html p對象時鼠標變為文本選擇樣式 */

a { cursor: pointer; } /* css註釋: 設置鼠標移動到a超鏈接對象時鼠標變為手指形狀(鏈接選擇) */

body { cursor: url("小圖片地址")} /* 設置鼠標指針默認為壹個小圖片 */。

常用的設置鼠標樣式方法就是這麽多,妳學會了嗎?

相關閱讀:

用css實現css動畫的暫停與播放功能教程

怎樣用CSS加粗字體

怎樣讓css圖片居中顯示