首頁 > web前端 > css教學 > 怎麼在css中改變遊標樣式

怎麼在css中改變遊標樣式

青灯夜游
發布: 2019-06-03 15:08:23
原創
5992 人瀏覽過

怎麼在css中改變遊標樣式

在css中cursor屬性是用來定義了滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀;我們可以通cursor屬性來設定滑鼠遊標(指標)樣式。

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)
登入後複製

可能的屬性值:

● 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遊標說明

1、div{ cursor:default }預設正常滑鼠指標

2 、div{ cursor:hand }div{ cursor:text } 文字選擇效果

#3、div{ cursor:move }

怎麼在css中改變遊標樣式

##################都選擇效果######4、###div{ cursor:pointer }### 手指形狀連結選擇效果######5、###div{ cursor:url(url圖片位址) }# ##設定物件為圖片#########cursor樣式效果圖######################滑鼠指標說明################################################################################################# ##cursor設定或擷取在物件上移動的滑鼠指標會採用何種系統預先定義的遊標形狀。 ######控制設定滑鼠指標樣式是比較常用的,但遊標切記勿濫用,也不要輕易設定自訂圖片為滑鼠樣式這樣會將網頁造成複雜與不符合使用者體驗感覺,切記遊標慎用。 ###

以上是怎麼在css中改變遊標樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板