HTML의 커서-HTML 튜토리얼-php.cn

HTML에서 커서 속성은 어떻게 작동하나요?

Cursor Values and its Description Table

Example #4

Conclusion

집

웹 프론트엔드

HTML 튜토리얼

HTML의 커서

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:53 PM

html html5 HTML Tutorial HTML Properties HTML tags

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

nw-ubah saiz HTML의 커서

saiz semula HTML의 커서

saiz sw ubah saiz ew Kursor ubah saiz dua arah. HTML의 커서

ns-ubah saiz HTML의 커서

saiz baru

nwse-resize Zum zum masuk Zum masuk dan zum keluar menunjukkan kursor HTML의 커서

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의 커서

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의 커서