使用 CSS 更改遊標的外觀-css教學-PHP中文網

語法

輸出

首頁

web前端

css教學

使用 CSS 更改遊標的外觀

王林

Sep 23, 2023 pm 02:53 PM

我們可以使用 CSS 遊標屬性來操作 HTML 文件中不同元素的遊標圖片。

語法

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}

登入後複製

以下是CSS 遊標屬性的值-

##78< td>#9 101112131415##16n-resize17ne-resize 18new-resize##19#20 212223#24##不允許指標進度row- resize#s-resize#se-resizesw-resize文字URLvertical-text < td>w-resize等待放大#縮小初始繼承以下是實作CSS遊標屬性的範例範例

Sr.No	值和說明< /th>
1	alias 表示某事物的別名要建立
2	全滾動 It表示可以向任何方向捲動的內容
#3	自動默認，瀏覽器設定遊標
4	單元格< /p> 表示可以選擇一個單元格（或一組單元格）
#5	< strong>context-menu 表示上下文選單可用
6	col-resize 表示列可以水平調整大小
	複製表示要複製的內容
十字線它呈現為十字線
	預設 #它呈現預設遊標
	e-resize 表示將盒子的邊緣向右（向東）移動
	ew-resize 表示雙向調整遊標大小
	#抓取表示可以抓取東西
	抓取 #表示可以抓取某物 < p>
	幫助 #表示有幫助 < p>
	移動表示要移動某物
	表示盒子的邊緣將會向上移動（北）
	表示盒子的邊緣要向上和向右移動（北/東）
	表示雙向調整遊標大小
ns-resize	表示雙向調整遊標大小
nw-resize	表示盒子的邊緣向上和向左移動（北/西）
nwse-resize	表示雙向調整大小遊標
no -drop	表示拖曳的item不能拖曳放在這裡
#無	沒有呈現遊標對於元素
	It表示請求的動作不會被執行 #25
	#它是一個指針，表示一個連結 26
	表示程式正忙（正在進行中） 27
	表示該行可以垂直調整大小 28
	表示將盒子的邊緣向下（向南）移動 29
	表示盒子的邊緣向下向右（南/東）移動 < /p> 30
	#表示一條邊框的要向下和向左移動（南/西） #31
	表示可以選擇的文字 32
	#以逗號分隔的自訂遊標的URL 列表，並在末尾提到通用遊標作為故障安全< /strong> #33
表示可以選擇的直排文字 #34
	表示盒子的邊緣向左（往西）移動 #35
	#表示程式正忙 < /p> 36
	表示某物可以放大 37
	它表示可以縮小某些內容 38
	#它將遊標屬性設為其預設值。 39
	它從父元素繼承了cursor屬性。

現場示範

<!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>

登入後複製