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

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

移動(dòng)端

【實(shí)例介紹】

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

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

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

【實(shí)例代碼】


<!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>無(wú)標(biāo)題文檔</title>
<style> 
.cursor1{cursor:hand}　
</style>
</head>
<body class="cursor1">
顯示你個(gè)性的鼠標(biāo)指針
</body>
</html>

【代碼分析】

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

控制鼠標(biāo)指針