HTML 中的光标

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

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: 

<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>


<div class="div2">
<h3 id="Progress-Cursor-Demo">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 id="Help-Cursor-Demo">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 id="Pointer-Cursor-Demo">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 id="Wait-Cursor-Demo">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>

Output:

Explanation: In the above output, click any paragraph for seeing the corresponding cursor output.

Example #2

Selection showing cursors

Code:

<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>


<div class="div2">
<h3 id="Cross-hair-Cursor-Demo">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 id="Horizontal-Text-Cursor-Demo">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 id="Vertical-Text-Cursor-Demo">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>

Output:

Explanation: In the above output, click any paragraph for seeing the corresponding cursor output.

Example #3

Drag and drop showing cursors.

Code:

<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>


<div class="div2">
<h3 id="Alias-Cursor-Demo">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 id="Copy-Cursor-Demo">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 id="Move-Cursor-Demo">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 id="No-drop-Cursor-Demo">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 id="Grab-Cursor-Demo">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 id="Not-allowed-Cursor-Demo">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>

Output:

Explanation: In the above output, click any paragraph for seeing the corresponding cursor output.

Example #4

Selection showing cursors.

Code:

<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>


<div class="div2">
<h3 id="Zoom-in-Cursor-Demo">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 id="Zoom-out-Cursor-Demo">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>

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