我們可以使用 CSS 光標(biāo)屬性來操作 HTML 文檔中不同元素的光標(biāo)圖像。
語法
The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}
登錄后復(fù)制
以下是 CSS 光標(biāo)屬性的值 –
| Sr.No | 值和說明 |
|---|---|
| 1 | alias
表示某事物的別名待創(chuàng)建 |
| 2 | 全滾動
It表示可以向任意方向滾動的內(nèi)容 |
| 3 | 自動
默認(rèn)，瀏覽器設(shè)置光標(biāo) |
| 4 | 單元格
表示可以選擇一個單元格（或一組單元格） |
| 5 | context-menu
表示上下文菜單可用 |
| 6 | col-resize
表示列可以水平調(diào)整大小 |
| 7 | 復(fù)制
表示要復(fù)制的內(nèi)容 |
| 8 | 十字線
它呈現(xiàn)為十字線 |
| 9 | 默認(rèn)
它呈現(xiàn)默認(rèn)光標(biāo) |
| 10 | e-resize
表示將盒子的邊緣向右（向東）移動 |
| 11 | ew-resize
表示雙向調(diào)整光標(biāo)大小 |
| 12 | 抓取
表示可以抓取東西 |
| 13 | 抓取
表示可以抓取某物 |
| 14 | 幫助
表示有幫助 |
| 15 | 移動
表示要移動某物 |
| 16 | n-resize
表示盒子的邊緣將向上移動（北） |
| 17 | ne-resize
表示盒子的邊緣要向上和向右移動（北/東） |
| 18 | new-resize
表示雙向調(diào)整光標(biāo)大小 |
| 19 | ns-resize
表示雙向調(diào)整光標(biāo)大小 |
| 20 | nw-resize
表示盒子的邊緣向上和向左移動（北/西） |
| 21 | nwse-resize
表示雙向調(diào)整大小光標(biāo) |
| 22 | no-drop
表示拖動的item不能被拖拽放在此處 |
| 23 | 無
沒有呈現(xiàn)光標(biāo)對于元素 |
| 24 | 不允許
It表示請求的動作不會被執(zhí)行 |
| 25 | 指針
它是一個指針，表示一個鏈接 |
| 26 | 進度
表示程序正忙（正在進行中） |
| 27 | row- resize
表示該行可以垂直調(diào)整大小 |
| 28 | s-resize
表示將盒子的邊緣向下（向南）移動 |
| 29 | se-resize
表示盒子的邊緣向下向右（南/東）移動 |
| 30 | sw-resize
表示一條邊框的要向下和向左移動（南/西） |
| 31 | 文本
表示可以選擇的文字 |
| 32 | URL
以逗號分隔的自定義光標(biāo)的 URL 列表，并在末尾提到通用光標(biāo)作為故障安全 |
| 33 | vertical-text
表示可以選擇的豎排文本 |
| 34 | w-resize
表示盒子的邊緣向左（向西）移動 |
| 35 | 等待
表示程序正忙 |
| 36 | 放大
表示某物可以放大 |
| 37 | 縮小
它表示可以縮小某些內(nèi)容 |
| 38 | 初始
它將光標(biāo)屬性設(shè)置為其默認(rèn)值。 |
| 39 | 繼承
它從父元素繼承了cursor屬性。 |
以下是實現(xiàn)CSS光標(biāo)屬性的示例
示例
?現(xiàn)場演示
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px;
float: left;
}
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>
登錄后復(fù)制
輸出
以上就是使用 CSS 更改光標(biāo)的外觀的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
