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

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

Item tidak digugurkan, menunjukkan kursor.

tidak dibenarkan

Permintaan tidak dapat meneruskan tindakan kursor ke hadapan.

rebut

Merebut kursor

merampas

Sesuatu sedang ditangkap kursor.

Mengubah saiz & Menatal

semua tatal

Tatal ke mana-mana arah tertentu menunjukkan kursor. saiz kor semula Item/lajur boleh diubah saiz secara mendatar. saiz baris Item/lajur boleh diubah saiz Menegak. n-ubah saiz Mana-mana tepi yang dialihkan ke arah tertentu yang ditunjukkan menunjukkan kursor. e-saiz semula s-ubah saiz w-ubah saiz ne-resize nw-ubah saiz saiz semula saiz sw ubah saiz ew Kursor ubah saiz dua arah. ns-ubah saiz saiz baru nwse-resize Zum zum masuk Zum masuk dan zum keluar menunjukkan kursor zum keluar

 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!