HTML의 커서

WBOY
풀어 주다: 2024-09-04 16:53:24
원래의
967명이 탐색했습니다.

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 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의 커서
Item tidak digugurkan, menunjukkan kursor.
tidak dibenarkan HTML의 커서 Permintaan tidak dapat meneruskan tindakan kursor ke hadapan.
rebut HTML의 커서 Merebut kursor
merampas HTML의 커서 Sesuatu sedang ditangkap kursor.
Mengubah saiz & Menatal semua tatal
HTML의 커서
HTML의 커서 Tatal ke mana-mana arah tertentu menunjukkan kursor. HTML의 커서 saiz kor semula Item/lajur boleh diubah saiz secara mendatar.HTML의 커서 saiz baris Item/lajur boleh diubah saiz Menegak.HTML의 커서 n-ubah saiz Mana-mana tepi yang dialihkan ke arah tertentu yang ditunjukkan menunjukkan kursor.HTML의 커서 e-saiz semula HTML의 커서 s-ubah saiz HTML의 커서 w-ubah saiz HTML의 커서 ne-resize HTML의 커서 nw-ubah saiz HTML의 커서 saiz semula HTML의 커서 saiz sw HTML의 커서 ubah saiz ew Kursor ubah saiz dua arah.HTML의 커서 ns-ubah saiz HTML의 커서 saiz baru HTML의 커서 nwse-resize HTML의 커서Zum zum masuk Zum masuk dan zum keluar menunjukkan kursorHTML의 커서 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:

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

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿