使用 CSS 更改光标的外观

百变鹏仔 3个月前 (09-19) #CSS

文章标签标的

我们可以使用 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 表示将盒子的边缘向右（向东）移动
11	ew-resize 表示双向调整光标大小
12	抓取表示可以抓取东西
13	抓取表示可以抓取某物
14	帮助表示有帮助
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 表示盒子的边缘向下向右（南/东）移动
30	sw-resize 表示一条边框的要向下和向左移动（南/西）
31	文本表示可以选择的文字
32	URL 以逗号分隔的自定义光标的 URL 列表，并在末尾提到通用光标作为故障安全
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 更改光标的外观

语法

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写