使用 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 光标属性的值 -

< td>8< td>33

Sr.No	值和说明< /th>
1	alias 表示某事物的别名待创建
2	全滚动 It表示可以向任意方向滚动的内容
3	自动默认，浏览器设置光标
4	单元格< /p> 表示可以选择一个单元格（或一组单元格）
5	< strong>context-menu 表示上下文菜单可用
6	col-resize 表示列可以水平调整大小
7	复制表示要复制的内容
十字线它呈现为十字线
9	默认它呈现默认光标
10	e-resize 表示将盒子的边缘向右（向东）移动
11	ew-resize 表示双向调整光标大小
12	抓取表示可以抓取东西
13	抓取表示可以抓取某物 < p>
14	帮助表示有帮助 < p>
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 表示盒子的边缘向下向右（南/东）移动< /p>
30	sw-resize 表示一条边框的要向下和向左移动（南/西）
31	文本表示可以选择的文字
32	URL< /strong> 以逗号分隔的自定义光标的 URL 列表，并在末尾提到通用光标作为故障安全
vertical-text 表示可以选择的竖排文本
34	w-resize 表示盒子的边缘向左（向西）移动
35	等待表示程序正忙< /p>
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>

登录后复制