CSS控制用戶瀏覽網頁的光標

作者:佚名 來源:網絡 時間:2007-10-07 標簽:

CSS允許你控制網頁外觀和布局的各個方面――包括字體、頁邊空白和光標。不錯,從CSS 2.1開始,你就可以方便地控制用戶瀏覽網頁時使用的光標。

標準的CSS光標呈箭頭狀,一般來說,它都能滿足一個網頁或網站的需求,但有些時候你可能需要使用其它的光標。在這些情況下,CSS標準提供了眾多選項。

CSS光標類型

下表概括說明了CSS標準中的一些光標類型。

默認光標:使用標準的箭頭。
手狀光標:光標呈手形,食指伸出。
指針狀光標:與手狀光標相同。
十字線光標:使用十字光標(一個加號)。
移動光標:使用十字光標,每條線末端是一個箭頭。這和Windows中移動窗口時使用的光標相同。
文本光標:使用I形光標(大寫字母I)。
等待光標:光標呈沙漏狀。
幫助光標:使用問號光標。
e-resize:標準將這個光標定義為一個指向東方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的水平線。
w-resize:標準將這個光標定義為一個指向西方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的水平線。
ne-resize:標準將這個光標定義為一個指向東北方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的對角線。
nw-resize:標準將這個光標定義為一個指向西北方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的對角線。
se-resize:標準將這個光標定義為一個指向東南方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的對角線。
s-resize:標準將這個光標定義為一個指向南方或下方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的垂直線。
sw-resize:標準將這個光標定義為一個指向西南方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的對角線。
n-resize:標準將這個光標定義為一個指向北方或上方的箭頭,但在多數瀏覽器中,顯示的光標為一條兩端帶箭頭的垂直線。
進展光標:光標呈沙漏狀。
禁止光標:光標是一個里面帶對角線的圓。
不可拖動光標:光標呈手形,右邊帶禁止光標。
垂直文本光標:光標呈水平I形。
三角方向光標:光標為四個箭頭,中間使用一個圓點。
顏色調整光標:兩條平行垂直線上畫一條水平箭頭,就像微軟Excel中調整列大小的光標。
行調整光標:兩條平等水平線上畫一條垂直箭頭,就像微軟Excel中調整行大小的光標。
url(uri):這種光標允許你使用作為rui提交的外部文件中定義的定制光標。

我們可以使用上表中的值,以及一個元素的光標屬性。下面的一行代碼說明如何使用一個HTML元素的style屬性。

style="cursor: hand;"

和其它CSS屬性一樣,你可以為整個頁面或頁面中的單個元素定義一個光標。列表A中的HTML實例對各種頁面元素使用一個不同的光標。

<html>
<head>
<title>Using the CSS cursor property</title>
</head>
<body style="cursor: all-scroll;">
<h1 style="cursor: hand;">Title of the page</h1>
<h2 style="cursor: crosshair;">Subtitle</h2>
<p style="cursor: move;">Some text goes here.</p>
<a href="http://www.news.com/" mce_href="http://www.news.com/" style="cursor: wait;">Read the news</a>
<br><br>
<a href="http://www.techrepublic.com/" mce_href="http://www.techrepublic.com/" style="cursor: help;">TR</a>
</body>
</html>

這例子通過body元素的style屬性給整個文檔添加一個光標,但頁面中的單個元素也有它們自己指定的光標,因此當用戶瀏覽頁面時,光標由頁面光標(來自body元素)轉變為單個元素的光標。列表B中的例子說明如何根據類或元素類型確定光標的式樣。

<html>
<head>
<title>Using the CSS cursor property</title>
<style type="text/css">
body {cursor: all-scroll;}
p
a
.headers
</style>
</head>
<body>
<h1 class="headers">Title of the page</h1>
<h2 class="headers">Subtitle</h2>
<p>Some text goes here.</p>
<a href="http://www.news.com/" mce_href="http://www.news.com/">Read the news</a>
<br><br>
<a href="http://www.techrepublic.com/" mce_href="http://www.techrepublic.com/">TR</a>
</body>
</html>

不要過度使用CSS光標

雖然前面的例子只是為了說明光標的用法,但它也表明在一個頁面中使用各種光標可能會令人迷惑。用戶希望網站按預計的方式運行,因此很少使用預備光標。

當用戶接近一個幫助按鈕或鏈接時使用幫助值,是使用光標類型而非默認光標的典型例子。盡管你可以使用標準值,但你也可以使用一個定制光標。

通過CSS應用光標的一個重要因素是默認指針總是有效。瀏覽器支持始于Netscape 4和IE 6,但你還是應該進行徹底的測試。如果你利用一個用戶的瀏覽器并不支持的光標值,這點就顯得十分重要。在這種情況下,頁面將顯示默認光標,使得用戶體驗不會受到影響。

通過JavaScript應用CSS光標屬性

通過JavaScript,使用以下語法,可以方便的訪問和應用一個元素的光標屬性:

element.style.cursor="cursor_value";

你可以在頁面中使用這個語法和其它JavaScript中的各種有效事件。列表C中的例子對頁面中的最后一個鏈接使用onFocus事件,并對頁面的body部分使用onSelectStart事件(當用戶用鼠標在選中頁面上的某個內容時)。當事件如JavaScript定義的那樣運行時,即會顯示某些光標。

<html>
<head>
<title>Using the CSS cursor property</title>
<style type="text/css">
body {cursor: all-scroll;}
p
.headers
</style>
</head>
<body onSelectStart="this.style.cursor='not-allowed'; return false;">
<h1 class="headers">Title of the page</h1>
<h2 class="headers">Subtitle</h2>
<p>Some text goes here.</p>
<a href="http://www.news.com/" mce_href="http://www.news.com/">Read the news</a>
<br><br>
<a href="http://www.techrepublic.com/" mce_href="http://www.techrepublic.com/" onFocus="this.style.cursor='text'; return
false;">TR</a>
</body>
</html>

更多選項

CSS為Web應用程序開發提供眾多選項。開發者可以通過CSS、標準HTML、JavaScript或組合這些標準控制頁面元素。如CSS標準定義的那樣,控制光標只是一個易于控制的選項,但你也不能過度使用它。

Tony Patton擁有豐富的Java、VB、Lotus及XML認證方面知識,是一個專業的應用程序開發人員。

相關文章:

推薦設計

最新文章