在網(wǎng)頁布局的時(shí)候，在特定的地方，光標(biāo)形狀各有區(qū)別。這個(gè)時(shí)候，就需要用到css的cursor屬性。根據(jù)自身需要選擇設(shè)置鼠標(biāo)指針樣式。
定義和用法
cursor 屬性規(guī)定要顯示的光標(biāo)的類型（形狀）。
該屬性定義了鼠標(biāo)指針放在一個(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀（不過 CSS2.1 沒有定義由哪個(gè)邊界確定這個(gè)范圍）。
| 默認(rèn)值： | auto |
|---|---|
| 繼承性： | yes |
| 版本： | CSS2 |
| JavaScript 語法： | object.style.cursor="crosshair" |
可能的值 ( 圖片測試于： chrome 版本 56.0.2924.87 // Firefor 版本 51.0.1 (32 位) // IE 8.0)
| 值 | 描述 |
|---|---|
| url | 需使用的自定義光標(biāo)的 URL。注釋：請?jiān)诖肆斜淼哪┒耸冀K定義一種普通的光標(biāo)，以防沒有由 URL 定義的可用光標(biāo)。 |
| default | 默認(rèn)光標(biāo)（通常是一個(gè)箭頭）  cursor(default).png
|
| auto | 默認(rèn)。瀏覽器設(shè)置的光標(biāo)。 cursor(auto).png
|
| crosshair | 光標(biāo)呈現(xiàn)為十字線。 cursor(crosshari)
|
| pointer | 光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）  cursor(pointer).png
|
| move | 此光標(biāo)指示某對象可被移動(dòng)。  cursor(move).png
|
| e-resize | 此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)。 cursor(e-resize).png
|
| ne-resize | 此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）。  cursor(ne-resize).png
|
| nw-resize | 此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）。 cursor(nw-resize).png
|
| n-resize | 此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)。  cursor(n-resize).png
|
| se-resize | 此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）。 cursor(se-resize).png
|
| sw-resize | 此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）。 cursor(sw-resize).png
|
| s-resize | 此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）。  cursor(s-resize).png
|
| w-resize | 此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）。 cursor(w-resize).png
|
| text | 此光標(biāo)指示文本。 cursor(text).png
|
| wait | 此光標(biāo)指示程序正忙（通常是一只表或沙漏）。  cursor(wait).png
|
| help | 此光標(biāo)指示可用的幫助（通常是一個(gè)問號或一個(gè)氣球）。  cursor(help).png
|
例子：
<!DOCTYPE html>
<html>
<head>
<title>cursor屬性</title>
</head>
<body>
<p>請把鼠標(biāo)移動(dòng)到單詞上，可以看到鼠標(biāo)指針發(fā)生變化：</p>
<span style="cursor:auto">Auto......</span><br />
<span style="cursor:crosshair">Crosshair......</span><br />
<span style="cursor:default">Default......</span><br />
<span style="cursor:pointer">Pointer......</span><br />
<span style="cursor:move">Move......</span><br />
<span style="cursor:e-resize">e-resize......</span><br />
<span style="cursor:ne-resize">ne-resize......</span><br />
<span style="cursor:nw-resize">nw-resize......</span><br />
<span style="cursor:n-resize">n-resize......</span><br />
<span style="cursor:se-resize">se-resize......</span><br />
<span style="cursor:sw-resize">sw-resize......</span><br />
<span style="cursor:s-resize">s-resize......</span><br />
<span style="cursor:w-resize">w-resize......</span><br />
<span style="cursor:text">text......</span><br />
<span style="cursor:wait">wait......</span><br />
<span style="cursor:help">help......</span>
</body>
</html>
