Css cursor滑鼠指針滑鼠光标樣式

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; }

a { cursor: pointer; }

body { cursor: url(“小圖檔位址”)}

擴充閱讀：css a、css a link、a hover、css超連結樣式

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

滑鼠指針樣式控制設定是比較常用的，比如日常我們在DIV+CSS布局時候，我們希望滑鼠指向某個局部span标簽對象時候，滑鼠指針光标就變為手指狀态，這個時候我們就對對象span設定cursor: pointer即可。以上我們圖例展示常用的滑鼠光标形狀與css單詞，希望布局時候更加自身需要選擇設定滑鼠指針樣式。需要注意是，光标切記勿濫用，也不要輕易設定自定義圖檔為滑鼠樣式這樣會将網頁造成複雜與不符合使用者體驗感覺，切記光标慎用。

原文位址：http://www.divcss5.com/rumen/r427.shtml