使用 CSS 更改光标的外观-css教程-PHP中文网

使用 CSS 更改光标的外观

王林

发布： 2023-09-23 14:53:05

转载

1685人浏览过

我们可以使用 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 表示双向调整大小光标动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包 508 查看详情
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中文网其它相关文章！