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:
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
