·您當前的位置:首頁 > 技術教程 > Html5技術 >

[css]CSS鼠標cursor屬性的用法示例

時間:2019-08-27 15:35cuplayer.com
CSS cursor 屬性,[css]CSS鼠標cursor屬性的用法示例

Css cursor鼠標指針鼠標光標樣式教程篇

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

可能的值

描述
url

需使用的自定義光標的 URL。

注釋:請在此列表的末端始終定義一種普通的光標,以防沒有由 URL 定義的可用光標。

default 默認光標(通常是一個箭頭)
auto 默認。瀏覽器設置的光標。
crosshair 光標呈現為十字線。
pointer 光標呈現為指示鏈接的指針(一只手)
move 此光標指示某對象可被移動。
e-resize 此光標指示矩形框的邊緣可被向右(東)移動。
ne-resize 此光標指示矩形框的邊緣可被向上及向右移動(北/東)。
nw-resize 此光標指示矩形框的邊緣可被向上及向左移動(北/西)。
n-resize 此光標指示矩形框的邊緣可被向上(北)移動。
se-resize 此光標指示矩形框的邊緣可被向下及向右移動(南/東)。
sw-resize 此光標指示矩形框的邊緣可被向下及向左移動(南/西)。
s-resize 此光標指示矩形框的邊緣可被向下移動(南)。
w-resize 此光標指示矩形框的邊緣可被向左移動(西)。
text 此光標指示文本。
wait 此光標指示程序正忙(通常是一只表或沙漏)。
help 此光標指示可用的幫助(通常是一個問號或一個氣球)。

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圖片地址) }設置對象為圖片

熱門文章推薦

請稍候...

保利威視云平臺-輕松實現點播直播視頻應用

酷播云數據統計分析跨平臺播放器

澳客网竞彩足球比分直