我们可以使用 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
表示上下文菜单可用
6col-resize
表示列可以水平调整大小
7 复制
表示要复制的内容
8 十字线
它呈现为十字线
9 默认
它呈现默认光标
10 e-resize
表示将盒子的边缘向右（向东）移动
11 ew-resize
表示双向调整光标大小
12 抓取
表示可以抓取东西
13 抓取
表示可以抓取某物
14 帮助
表示有帮助
15 移动
表示要移动某物
16 n-resize
表示盒子的边缘将向上移动（北）
17 ne-resize表示盒子的边缘要向上和向右移动（北/东）
18 new-resize
表示双向调整光标大小
19ns-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 更改光标的外观的详细内容。