搜索

首页  >  文章  >  web前端  >  HTML 中的光标

HTML 中的光标

WBOY
WBOY原创
2024-09-04 16:53:24957浏览

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

调整大小行调整大小n-调整大小
Type HTML Value How Cursor Look Like? Description
General auto Based on the text cursor will change automatically.
default HTML 中的光标 By default, an arrow cursor.
none No cursor is displayed.
Links & Status context-menu HTML 中的光标 Cursor like context menu
help HTML 中的光标 Help information with an arrow question mark.
pointer HTML 中的光标 Pointer symbol with a hand like a cursor.
progress HTML 中的光标 Says program is busy and can able to interact with the application.
wait HTML 中的光标 Says program is busy and cannot able to interact with the application.
Selection cell HTML 中的光标 Cells can be selected from the table showing the cursor.
crosshair HTML 中的光标 Cross cursor used for selection.
text HTML 中的光标 An I-beam cursor used for the selected text.
vertical-text HTML 中的光标 A sideway I-beam cursor used for the vertical selected text.
Drag & Drop alias HTML 中的光标 shortcut cursor
copy HTML 中的光标 Copied cursor
move HTML 中的光标 the element can be moved with the cursor.
no-drop
HTML 中的光标
项目未掉落，显示光标。
不允许 HTML 中的光标 请求无法继续光标操作。
抓住 HTML 中的光标 抓住光标
抓 HTML 中的光标 有东西被抓住光标。
调整大小和滚动 全滚动
HTML 中的光标
HTML 中的光标
在显示光标的任何特定方向上滚动。 HTML 中的光标
项目/列可以水平调整大小。HTML 中的光标
项目/列可以垂直调整大小。HTML 中的光标
在显示光标的特定显示方向上移动的任何边缘。HTML 中的光标
电子调整大小 HTML 中的光标
s-调整大小 HTML 中的光标
w-调整大小 HTML 中的光标
重新调整大小 HTML 中的光标
西北调整大小 HTML 中的光标
自动调整大小 HTML 中的光标
sw-调整大小 HTML 中的光标 调整大小
双向调整光标大小。HTML 中的光标
ns-调整大小 HTML 中的光标
新调整大小 HTML 中的光标
nwse-调整大小 HTML 中的光标缩放 放大
放大和缩小显示光标HTML 中的光标
缩小

 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:

HTML 中的光标

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:

HTML 中的光标

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:

HTML 中的光标

HTML 中的光标

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:

HTML 中的光标

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中文网其他相关文章！

html edge if for auto using Property pointer copy symbol default this column table zoom
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：HTML Input Placeholder下一篇：HTML Table Layout

相关文章

查看更多