知識：CSS方便地控制使用者瀏覽網頁時使用的游標

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

css|游標|控制|網頁

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執行個體對各種頁面元素使用一個不同的游標。

<title>Using the CSS cursor property</title>

</head>

<h1 style="cursor: hand;">Title of the page</h1>

<h2 style="cursor: crosshair;">Subtitle</h2>

<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/" style="cursor: help;">WEBJX</a>

</body></html>

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

<title>Using the CSS cursor property</title>

body {cursor: all-scroll;}

.headers

</style></head>

<body>

<h1 class="headers">Title of the page</h1>

<h2 class="headers">Subtitle</h2>

<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/">WEBJX</a>

</body></html>

不要過度使用CSS游標

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

當使用者接近一個協助按鈕或連結時使用協助值，是使用游標類型而非預設游標的典型例子。儘管你可以使用標準值，但你也可以使用一個定製游標。

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

通過JavaScript應用CSS游標屬性

通過JavaScript，使用以下文法，可以方便的訪問和應用一個元素的游標屬性：

element.style.cursor="cursor_value";

你可以在頁面中使用這個文法和其它JavaScript中的各種有效事件。列表C中的例子對頁面中的最後一個連結使用onFocus事件，並對頁面的body部分使用onSelectStart事件（當使用者用滑鼠在選中頁面上的某個內容時）。當事件如JavaScript定義的那樣運行時，即會顯示某些游標。

<title>Using the CSS cursor property</title>

body {cursor: all-scroll;}

.headers

</style>

</head>

<h1 class="headers">Title of the page</h1>

<h2 class="headers">Subtitle</h2>

<a href="http://www.webjx.com/" mce_href="http://www.webjx.com/"

>WEBJX</a>

</body></html>

更多選項

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More