使用 CSS 更改光标外观

cssweb developmentfront end technology更新于 2025/1/6 19:56:17

我们可以使用 CSS 的 cursor 属性来操作 HTML 文档中不同元素的光标图像。

语法

CSS 光标属性的语法如下:
Selector {
   cursor: /*value*/
}

以下是 CSS 光标属性的值 −

Sr.No	值 &说明
1	alias 表示要创建某个对象的别名
2	all-scroll 表示对象可以向任意方向滚动
3	auto 默认设置，浏览器会设置光标
4	cell 表示可以选择一个单元格(或一组单元格)
5	context-menu 表示上下文菜单可用
6	col-resize 表示该列可以水平调整大小
7	copy 表示要复制某些内容
8	crosshair 呈现为十字线
9	default 呈现默认光标
10	e-resize 表示框的一条边向右(东)移动
11	ew-resize 表示双向调整大小光标
12	grab 表示可以抓取
13	grabbing 表示可以抓取某些东西
14	help 表示可以获得帮助
15	move 表示需要移动某些东西
16	n-resize 表示框的一条边要向上(北)移动
17	ne-resize 表示框的一条边要向上和向右移动(北/东)
18	nesw-resize 表示双向调整大小光标
19	ns-resize 表示双向调整大小光标
20	nw-resize 表示框的边缘将向上和向左移动(北/西)
21	nwse-resize 表示双向调整大小光标
22	no-drop 表示被拖动的项目不能被放下此处
23	none 元素未呈现任何光标
24	not-allowed 表示不会执行请求的操作
25	pointer 这是一个指针，表示一个链接
26	progress 表示程序正忙(正在进行中)
27	row-resize 表示该行可以垂直调整大小
28	s-resize 表示一个框将向下移动(南)
29	se-resize 表示框的一个边缘将向下和向右移动(南/东)
30	sw-resize 表示框的一个边缘将向下和向左移动(南/西)
31	text 表示可以选择的文本
32	URL 以逗号分隔的自定义光标 URL 列表，末尾提到通用光标失败安全
33	vertical-text 表示可以选择的vertical-text
34	w-resize 表示框的一条边要向左(西)移动
35	wait 表示程序正忙
36	zoom-in 表示可以放大某些内容
37	zoom-out 表示可以缩小某些内容
38	initial 将光标属性设置为其默认值。
39	inherit 它从其父元素继承了光标属性。

以下是实现 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>