cursor CSS屬性指定當(dāng)指針被放置在一個(gè)元素上顯示的光標(biāo)類型。
下表為此屬性的用法說明和版本歷史記錄,以及該屬性在javascript腳本中的使用語(yǔ)法。
| 默認(rèn)值: | auto |
|---|---|
| 適用于: | 所有元素 |
| 繼承: | 是 |
| 可動(dòng)畫制作: | 否。請(qǐng)參見 動(dòng)畫屬性。 |
| 版本: | CSS 2、3 |
| JavaScript 語(yǔ)法: | object.style.cursor="context-menu" |
該屬性的語(yǔ)法如下:
cursor: [url(address of cursor file),] 0 or more times | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | initial | inherit
下面的示例演示了如何使用cursor屬性。
h1 {
cursor: copy;
}
p {
cursor: help;
}
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}測(cè)試看看?/?cursor屬性用來指定用逗號(hào)分隔的用戶定義的游標(biāo)值列表,后跟“通用游標(biāo)”。也就是如果第一個(gè)光標(biāo)指定不正確或找不到,則將使用逗號(hào)分隔列表中的下一個(gè)光標(biāo),依此類推,直到找到可用的光標(biāo)為止。
如果沒有用戶定義的游標(biāo)有效或不受瀏覽器支持,則將使用列表末尾的通用游標(biāo)。學(xué)到更多。
下表描述了此屬性的值。
| 值 | 看 | 描述 |
|---|---|---|
| 常用 | ||
| auto | 瀏覽器根據(jù)當(dāng)前上下文確定要顯示的光標(biāo)。例如,將文本懸停在文本上。這是默認(rèn)值。 | |
| default | ![]() | 平臺(tái)的默認(rèn)光標(biāo),不考慮上下文,通常是箭頭。 |
| none | 沒有呈現(xiàn)光標(biāo)。 | |
| initial | 將此屬性設(shè)置為其默認(rèn)值。 | |
| inherit | 如果指定,則關(guān)聯(lián)元素采用其父元素cursor的屬性值。 | |
| 鏈接和狀態(tài)游標(biāo) | ||
| context-menu | ![]() | 表示上下文菜單可用。 |
| help | ![]() | 表示有幫助。 |
| pointer | ![]() | 指示鏈接的光標(biāo),通常是帶有伸出的食指的手。 |
| progress | ![]() | 進(jìn)度指示器。該程序正在執(zhí)行一些處理,但是用戶仍然可以與界面進(jìn)行交互(與不同wait)。 |
| wait | ![]() | 表示程序忙,用戶應(yīng)該等待。 |
| 選擇光標(biāo) | ||
| cell | ![]() | 表示可以選擇一個(gè)單元格(或一組單元格)。 |
| crosshair | ![]() | 一個(gè)簡(jiǎn)單的十字準(zhǔn)線。通常用于指示位圖中的選擇。 |
| text | ![]() | 表示可以選擇的文本,通常是工字梁。 |
| vertical-text | ![]() | 表示可以選擇垂直文本,即橫向工字梁。 |
| 拖放游標(biāo) | ||
| alias | ![]() | 表示要?jiǎng)?chuàng)建別名或快捷方式。 |
| copy | ![]() | 表示可以復(fù)制某些內(nèi)容。 |
| move | ![]() | 表示可以移動(dòng)懸停的對(duì)象。 |
| no-drop | ![]() | 表示所拖動(dòng)的項(xiàng)目不能放置在當(dāng)前位置。 |
| not-allowed | ![]() | 表示無法完成某事。 |
| 調(diào)整大小和滾動(dòng)游標(biāo) | ||
| all-scroll | ![]() | 表示可以沿任何方向滾動(dòng)(平移)。 |
| col-resize | ![]() | 指示可以水平調(diào)整列的大小。 |
| row-resize | ![]() | 指示可以垂直調(diào)整行的大小。 |
| n-resize | ![]() | 指示某些邊緣要向上移動(dòng)(向北)。 |
| e-resize | ![]() | 指示某些邊緣將向右移動(dòng)(向東)。 |
| s-resize | ![]() | 指示某些邊緣要向下移動(dòng)(向南)。 |
| w-resize | ![]() | 指示某些邊緣將向左移動(dòng)(向西)。 |
| ne-resize | ![]() | 指示某些邊緣將向上和向右移動(dòng)(北/東)。 |
| nw-resize | ![]() | 指示某些邊緣要上下移動(dòng)(北/西)。 |
| se-resize | ![]() | 指示某些邊緣要左右移動(dòng)(向南/向東)。 |
| sw-resize | ![]() | 指示某些邊緣要上下移動(dòng)(南/西)。 |
| ew-resize | ![]() | 指示雙向調(diào)整大小光標(biāo)。 |
| ns-resize | ![]() | |
| nesw-resize | ![]() | |
| nwse-resize | ![]() | |
| 縮放光標(biāo) | ||
| zoom-in | ![]() | 表示可以放大某些內(nèi)容。 |
| zoom-out | ![]() | 表示可以縮小某些內(nèi)容。 |
| grab | ![]() | 表示可以抓取某些東西(拖動(dòng)以進(jìn)行移動(dòng))。 |
| grabbing | ![]() | 表示某物被抓住了。 |
cursor屬性瀏覽器的兼容性,下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號(hào);所有主流瀏覽器均支持該屬性。
|
參見教程:CSS游標(biāo)。