1. 程式人生 > >css cursor滑鼠指標游標樣式default pointer hand url

css cursor滑鼠指標游標樣式default pointer hand url

Css cursor滑鼠指標滑鼠游標樣式教程篇

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

擴充套件閱讀css指標

一、cursor語法與結構    -   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游標說明

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樣式效果圖

cursor滑鼠游標指標樣式圖
css cursor滑鼠游標指標樣式圖

3、滑鼠指標說明
cursor設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

4、佈局結構
p { cursor: text; }  /*

css註釋: 設定滑鼠移動到html p物件時滑鼠變為文字選擇樣式 */
a { cursor: pointer; } /* css註釋: 設定滑鼠移動到a超連結物件時滑鼠變為手指形狀(連結選擇) */
body { cursor: url("小圖片地址")} /* 設定滑鼠指標預設為一個小圖片 */

二、滑鼠指標樣式總結    -   TOP

滑鼠指標樣式控制設定是比較常用的,比如日常我們在DIV+CSS佈局時候,我們希望滑鼠指向某個區域性span標籤物件時候,滑鼠指標游標就變為手指狀態,這個時候我們就對物件span設定cursor: pointer即可。以上我們圖例展示常用的滑鼠游標形狀與css單詞,希望佈局時候更加自身需要選擇設定滑鼠指標樣式。需要注意是,游標切記勿濫用,也不要輕易設定自定義圖片為滑鼠樣式這樣會將網頁造成複雜與不符合使用者體驗感覺,切記游標慎用。