css控制鼠標(biāo)指針

2012/11/26 10:55:59作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例介紹】

css控制鼠標(biāo)指針

在許多網(wǎng)站上我們可以看到很有個性的鼠標(biāo)指針(cursor)，在網(wǎng)頁設(shè)計中用css可以方便地實現(xiàn)這樣個性鼠標(biāo)指針的效果，該CSS屬性就是cursor屬性。一般而言，鼠標(biāo)以斜向上的箭頭顯示，移到文本上時變?yōu)橛蓄^的豎線，移到超級鏈接上變?yōu)槭中?。但用CSS可以控制鼠標(biāo)的顯示效果，例如可使鼠標(biāo)移到普通文本上時也顯示成手形。
下面為cursor屬性說明。

-----------------------------------------------------------------------------------------
值                        功能說明
-----------------------------------------------------------------------------------------
url                       需使用的自定義光標(biāo)的URL
n-resize            此光標(biāo)指示矩形框的邊緣可被向上移動
default                默認(rèn)光標(biāo)(通常是一個箭頭)
se-resize           此光標(biāo)指示矩形框的邊緣可被向下及向右移動
auto                    默認(rèn)。瀏覽器設(shè)置的光標(biāo)
sw-rcsize           此光標(biāo)指示矩形框的邊緣可被向下及向左移象
crosshair          光標(biāo)呈現(xiàn)為十字線
s-resize             此光標(biāo)指示矩形框的邊緣可被向下移動
pointer                光標(biāo)呈現(xiàn)為指示鏈接的指針(一只手)
w-resizc             此光標(biāo)指示矩形框的邊緣可被向左移動
move                  此光標(biāo)指示某對象可被移動
wait                      此光標(biāo)指示程序正忙(通常是一只表或沙漏)
e-resize               此光標(biāo)指示矩形框的邊緣可被向右移動
help                      此光標(biāo)指示可用的幫助(通常是一個問號或一個一
ne-resize             此光標(biāo)指示矩形框的邊緣可被向上及向右移動
text                       此光標(biāo)指示文本
nw-resize            此光標(biāo)指示矩形框的邊緣可被向上及向左移動。
-----------------------------------------------------------------------------------------

【實例代碼】


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style> 
.cursor1{cursor:hand}　
</style>
</head>
<body class="cursor1">
顯示你個性的鼠標(biāo)指針
</body>
</html>

【代碼分析】

在代碼中，加粗代碼是將鼠標(biāo)設(shè)置為手形，如圖所示。

控制鼠標(biāo)指針