首页 > 文章 > web前端 > 使用 CSS 更改光标的外观

使用 CSS 更改光标的外观

王林转载: 2023-09-23 14:53:051489浏览

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

语法

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

以下是 CSS 光标属性的值 -

833

Sr.No	值和说明
1	alias 表示某事物的别名待创建
2	全滚动 It表示可以向任意方向滚动的内容
3	自动默认，浏览器设置光标
4	单元格表示可以选择一个单元格（或一组单元格）
5	context-menu 表示上下文菜单可用
6	col-resize 表示列可以水平调整大小
7	复制表示要复制的内容
十字线它呈现为十字线
9	默认它呈现默认光标
10	e-resize 表示将盒子的边缘向右（向东）移动 td>
11	ew-resize 表示双向调整光标大小
12	抓取表示可以抓取东西
13	抓取表示可以抓取某物
14	帮助表示有帮助
15	移动表示要移动某物
16	n-resize 表示盒子的边缘将向上移动（北）
17	ne-resize 表示盒子的边缘要向上和向右移动（北/东）
18	new-resize 表示双向调整光标大小
19 td>	ns-resize 表示双向调整光标大小
20	nw-resize 表示盒子的边缘向上和向左移动（北/西）
21	nwse-resize 表示双向调整大小光标
22	no-drop 表示拖动的item不能被拖拽放在此处
23	无没有呈现光标对于元素
24	不允许 It表示请求的动作不会被执行
25	指针它是一个指针，表示一个链接
26	进度 p> 表示程序正忙（正在进行中）
27	row- resize 表示该行可以垂直调整大小
28	s-resize 表示将盒子的边缘向下（向南）移动
29	se-resize 表示盒子的边缘向下向右（南/东）移动
30	sw-resize 表示一条边框的要向下和向左移动（南/西）
31	文本 strong> 表示可以选择的文字
32	URL 以逗号分隔的自定义光标的 URL 列表，并在末尾提到通用光标作为故障安全
vertical-text 表示可以选择的竖排文本
34	w-resize 表示盒子的边缘向左（向西）移动 p>
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 更改光标的外观

以上是使用 CSS 更改光标的外观的详细内容。更多信息请关注PHP中文网其他相关文章！

css html 指针继承 td th

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：什么是 CSS 选择器？下一篇：如何在CSS中将align-self属性设置为其默认值？

查看更多