首页 > web前端 > css教程 > 使用 CSS 更改光标的外观

使用 CSS 更改光标的外观

王林
发布: 2023-09-23 14:53:05
转载
1529 人浏览过

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

语法

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}
登录后复制

以下是 CSS 光标属性的值 -

< td>8< td>33
Sr.No值和说明< /th>
1alias

表示某事物的别名待创建

2全滚动

It表示可以向任意方向滚动的内容

3自动

默认,浏览器设置光标

4单元格< /p>

表示可以选择一个单元格(或一组单元格)

5< strong>context-menu

表示上下文菜单可用

6col-resize

表示列可以水平调整大小

7复制

表示要复制的内容

十字线

它呈现为十字线

9默认

它呈现默认光标

10e-resize

表示将盒子的边缘向右(向东)移动

11ew-resize

表示双向调整光标大小

12抓取

表示可以抓取东西

13抓取

表示可以抓取某物

< p>
14帮助

表示有帮助

< p>
15移动

表示要移动某物

16n-resize

表示盒子的边缘将向上移动(北)

17ne-resize

表示盒子的边缘要向上和向右移动(北/东)

18 new-resize

表示双向调整光标大小

19ns-resize

表示双向调整光标大小

20 nw-resize

表示盒子的边缘向上和向左移动(北/西)

21nwse-resize

表示双向调整大小光标

22no-drop

表示拖动的item不能被拖拽放在此处

23

没有呈现光标对于元素

24不允许

It表示请求的动作不会被执行

25指针

它是一个指针,表示一个链接

26进度

表示程序正忙(正在进行中)

27row- resize

表示该行可以垂直调整大小

28 s-resize

表示将盒子的边缘向下(向南)移动

29se-resize

表示盒子的边缘向下向右(南/东)移动< /p>

30sw-resize

表示一条边框的要向下和向左移动(南/西)

31文本

表示可以选择的文字

32URL< /strong>

以逗号分隔的自定义光标的 URL 列表,并在末尾提到通用光标作为故障安全

vertical-text

表示可以选择的竖排文本

34w-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>
登录后复制

输出

使用 CSS 更改光标的外观

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

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板