设计之家 > 教程 > 網頁教程 > CSS教程 >

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認證方面知識，是一個專業的應用程序開發人員。

标签：

相關文章：

推薦設計

最新文章