在網(wǎng)頁布局的時候费奸，在特定的地方包雀，光標(biāo)形狀各有區(qū)別。這個時候孩饼，就需要用到css的cursor屬性髓削。根據(jù)自身需要選擇設(shè)置鼠標(biāo)指針樣式。
定義和用法
cursor 屬性規(guī)定要顯示的光標(biāo)的類型（形狀）镀娶。
該屬性定義了鼠標(biāo)指針放在一個元素邊界范圍內(nèi)時所用的光標(biāo)形狀（不過 CSS2.1 沒有定義由哪個邊界確定這個范圍）立膛。
| 默認(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。注釋：請在此列表的末端始終定義一種普通的光標(biāo)梯码，以防沒有由 URL 定義的可用光標(biāo)宝泵。 |
| default | 默認(rèn)光標(biāo)（通常是一個箭頭）  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)指示某對象可被移動。  cursor(move).png
|
| e-resize | 此光標(biāo)指示矩形框的邊緣可被向右（東）移動罢坝。 cursor(e-resize).png
|
| ne-resize | 此光標(biāo)指示矩形框的邊緣可被向上及向右移動（北/東）。  cursor(ne-resize).png
|
| nw-resize | 此光標(biāo)指示矩形框的邊緣可被向上及向左移動（北/西）搅窿。 cursor(nw-resize).png
|
| n-resize | 此光標(biāo)指示矩形框的邊緣可被向上（北）移動嘁酿。  cursor(n-resize).png
|
| se-resize | 此光標(biāo)指示矩形框的邊緣可被向下及向右移動（南/東）。 cursor(se-resize).png
|
| sw-resize | 此光標(biāo)指示矩形框的邊緣可被向下及向左移動（南/西）男应。 cursor(sw-resize).png
|
| s-resize | 此光標(biāo)指示矩形框的邊緣可被向下移動（南）闹司。  cursor(s-resize).png
|
| w-resize | 此光標(biāo)指示矩形框的邊緣可被向左移動（西）。 cursor(w-resize).png
|
| text | 此光標(biāo)指示文本沐飘。 cursor(text).png
|
| wait | 此光標(biāo)指示程序正忙（通常是一只表或沙漏）游桩。  cursor(wait).png
|
| help | 此光標(biāo)指示可用的幫助（通常是一個問號或一個氣球）。  cursor(help).png
|
例子：
<!DOCTYPE html>
<html>
<head>
<title>cursor屬性</title>
</head>
<body>
<p>請把鼠標(biāo)移動到單詞上耐朴，可以看到鼠標(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>
