HTML 中的光标
html
html5
HTML Tutorial
HTML Properties
HTML tags
HTML 属性中的光标通过使用特定类型的光标属性来控制光标悬停在任何 HTML 元素上时的形状或外观和感觉。这个概念仅适用于任何有光标和鼠标的设备；如果没有，此功能可能会产生与光标属性相关的任何结果。此光标属性的目的是使用图像在任何表单上提交按钮。每当最终用户将鼠标悬停在图像上时，如果这是一个提交按钮，它会通过单击它自动向您提供该图像正在用作按钮的线索。
光标属性在 HTML 中如何工作？
HTML 光标属性基于 HTML 标签内的样式属性工作。我们将研究 HTML 中的一些不同的光标语法。
语法 #1
<span style="cursor:auto">auto</span>
登录后复制
语法#2
<span style="cursor:crosshair">crosshair</span>
登录后复制
语法#3
<span style="cursor:default">default</span>
登录后复制
语法#4
<span style="cursor:e-resize">e-resize</span>
登录后复制
语法#5
<span style="cursor:help">help</span>
登录后复制
语法#6
<span style="cursor:move">move</span>
登录后复制
语法#7
<span style="cursor:n-resize">n-resize</span>
登录后复制
语法#8
<span style="cursor:ne-resize">ne-resize</span>
登录后复制
语法#9
<span style="cursor:nw-resize">nw-resize</span>
登录后复制
语法#10
<span style="cursor:pointer">pointer</span>
登录后复制
语法#11
<span style="cursor:progress">progress</span>
登录后复制
语法#12
<span style="cursor:s-resize">s-resize</span>
登录后复制
语法#13
<span style="cursor:se-resize">se-resize</span>
登录后复制
语法#14
<span style="cursor:sw-resize">sw-resize</span>
登录后复制
语法#15
<span style="cursor:text">text</span>
登录后复制
语法#16
<span style="cursor:w-resize">w-resize</span>
登录后复制
语法#17
<span style="cursor:wait">wait</span>
登录后复制
Cursor Values and its Description Table
| Type | HTML Value | How Cursor Look Like? | Description | |||||
| General | auto | Based on the text cursor will change automatically. | ||||||
| default |  |
By default, an arrow cursor. | ||||||
| none | No cursor is displayed. | |||||||
| Links & Status | context-menu |  |
Cursor like context menu | |||||
| help |  |
Help information with an arrow question mark. | ||||||
| pointer |  |
Pointer symbol with a hand like a cursor. | ||||||
| progress |  |
Says program is busy and can able to interact with the application. | ||||||
| wait |  |
Says program is busy and cannot able to interact with the application. | ||||||
| Selection | cell |  |
Cells can be selected from the table showing the cursor. | |||||
| crosshair |  |
Cross cursor used for selection. | ||||||
| text |  |
An I-beam cursor used for the selected text. | ||||||
| vertical-text |  |
A sideway I-beam cursor used for the vertical selected text. | ||||||
| Drag & Drop | alias |  |
shortcut cursor | |||||
| copy |  |
Copied cursor | ||||||
| move |  |
the element can be moved with the cursor. | ||||||
| no-drop |
|
项目未掉落，显示光标。 | ||||||
| 不允许 |  |
请求无法继续光标操作。 | ||||||
| 抓住 |  |
抓住光标 | ||||||
| 抓 |  |
有东西被抓住光标。 | ||||||
| 调整大小和滚动 | 全滚动 |
|
 |
|||||
| 在显示光标的任何特定方向上滚动。 |
|
|||||||
项目/列可以水平调整大小。
|
||||||||
项目/列可以垂直调整大小。
|
||||||||
在显示光标的特定显示方向上移动的任何边缘。
|
||||||||
| 电子调整大小 |
|
|||||||
| s-调整大小 |
|
|||||||
| w-调整大小 |
|
|||||||
| 重新调整大小 |
|
|||||||
| 西北调整大小 |
|
|||||||
| 自动调整大小 |
|
|||||||
| sw-调整大小 |
|
调整大小 | ||||||
双向调整光标大小。
|
||||||||
| ns-调整大小 |
|
|||||||
| 新调整大小 |
|
|||||||
| nwse-调整大小 |
 缩放 |
放大 | ||||||
放大和缩小显示光标
|
Examples to Implement Cursor in HTML
Below are the examples mentioned:
Example #1
Links and Status showing cursors.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Cursors in HTML</title>
<style type="text/css">
.div2 {
border: 1px solid brown;
color: green;
width: 900px;
font-size: 20px;
}
.div3 {
border: 1px solid brown;
color: red;
width: 900px;
font-size: 20px;
}
.div4 {
border: 1px solid brown;
color: blue;
width: 900px;
font-size: 20px;
}
.div5 {
border: 1px solid brown;
color: lime;
width: 900px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="div2">
<h3 style="text-align: center">Progress Cursor Demo</h3>
<span style="cursor: progress">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div3">
<h3 style="text-align: center">Help Cursor Demo</h3>
<span style="cursor: help">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div4">
<h3 style="text-align: center">Pointer Cursor Demo</h3>
<span style="cursor: pointer">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div5">
<h3 style="text-align: center">Wait Cursor Demo</h3>
<span style="cursor: wait">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
</html>登录后复制
Output:
Explanation: In the above output, click any paragraph for seeing the corresponding cursor output.
Example #2
Selection showing cursors
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Cursors in HTML</title>
<style type="text/css">
.div2 {
border: 1px solid blue;
color: fuchsia;
width: 900px;
font-size: 20px;
}
.div3 {
border: 1px solid blue;
color: gray;
width: 900px;
font-size: 20px;
}
.div4 {
border: 1px solid blue;
color: maroon;
width: 900px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="div2">
<h3 style="text-align: center">Cross hair Cursor Demo</h3>
<span style="cursor: crosshair">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div3">
<h3 style="text-align: center">Horizontal Text Cursor Demo</h3>
<span style="cursor: text">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div4">
<h3 style="text-align: center">Vertical Text Cursor Demo</h3>
<span style="cursor: vertical-text">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
</html>登录后复制
Output:
Explanation: In the above output, click any paragraph for seeing the corresponding cursor output.
Example #3
Drag and drop showing cursors.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Cursors in HTML</title>
<style type="text/css">
.div2 {
border: 1px solid red;
color: orange;
width: 900px;
font-size: 20px;
}
.div3 {
border: 1px solid red;
color: olive;
width: 900px;
font-size: 20px;
}
.div4 {
border: 1px solid red;
color: navy;
width: 900px;
font-size: 20px;
}
.div5 {
border: 1px solid red;
color: lime;
width: 900px;
font-size: 20px;
}
.div6 {
border: 1px solid red;
color: blue;
width: 900px;
font-size: 20px;
}
.div7 {
border: 1px solid red;
color: maroon;
width: 900px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="div2">
<h3 style="text-align: center">Alias Cursor Demo</h3>
<span style="cursor: alias">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div3">
<h3 style="text-align: center">Copy Cursor Demo</h3>
<span style="cursor: copy">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div4">
<h3 style="text-align: center">Move Cursor Demo</h3>
<span style="cursor: move">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div5">
<h3 style="text-align: center">No-drop Cursor Demo</h3>
<span style="cursor: no-drop">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div6">
<h3 style="text-align: center">Grab Cursor Demo</h3>
<span style="cursor: grab">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div7">
<h3 style="text-align: center">Not-allowed Cursor Demo</h3>
<span style="cursor: not-allowed">Cursor in HTML property
controls shape or look and feel of the cursor when it is hovering on
the any HTML element by using specific type of cursor property.</span>
</div>
</html>登录后复制
Output:
Explanation: In the above output, click any paragraph for seeing the corresponding cursor output.
Example #4
Selection showing cursors.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Cursors in HTML</title>
<style type="text/css">
.div2 {
border: 1px solid fuchsia;
color: teal;
width: 900px;
font-size: 20px;
}
.div3 {
border: 1px solid fuchsia;
color: purple;
width: 900px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="div2">
<h3 style="text-align: center">Zoom-in Cursor Demo</h3>
<span style="cursor: zoom-in">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
<br>
<div class="div3">
<h3 style="text-align: center">Zoom-out Cursor Demo</h3>
<span style="cursor: zoom-out">Cursor in HTML property controls
shape or look and feel of the cursor when it is hovering on the any
HTML element by using specific type of cursor property.</span>
</div>
</html>登录后复制
Output:
Explanation: In the above output, click any paragraph for seeing the corresponding cursor output.
Conclusion
Cursor property works based on property value given to the cursor. Based on the requirement, we choose which cursor action required at the instant.
以上是HTML 中的光标的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前
By DDD
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
Inzoi：如何申请学校和大学
1 个月前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
在哪里可以找到Atomfall中的站点办公室钥匙
4 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
