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