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中的例子說明如何根據類或元素類型確定游標的式樣。
<