Home > Web Front-end > CSS Tutorial > Use CSS to change the appearance of your cursor

Use CSS to change the appearance of your cursor

王林
Release: 2023-09-23 14:53:05
forward
1631 people have browsed it

We can use CSS cursor properties to manipulate the cursor images of different elements in HTML documents.

Syntax

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}
Copy after login

The following are the values ​​of the CSS cursor property-

##45 67##8< td>cross Line9Default 10e-resize11ew-resize12Grab13Grab14Help15Move16n-resize17ne-resize 18new-resize##1920 nwse-resizeno -dropNoneNot allowedPointerProgress represents The program is busy (in progress) row- resizes-resizese-resizesw-resize indicates the text that can be selected with a comma Delimited list of URLs for custom cursors, with Universal Cursor mentioned at the end as fail-safeIndicates vertical text that can be selected< td>Indicates that the edge of the box moves to the left (west) Indicates that the program is busyIndicates something Can zoom inIt means that some content can be zoomed outIt sets the cursor properties to their default values. It inherits the cursor attribute from the parent element. Live demonstration
<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5px;
   float: left;
}
#one {
   background-color: beige;
}
#two {
   background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>
Copy after login
output

The above is the detailed content of Use CSS to change the appearance of your cursor. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Sr.NoValue and description< /th>
1alias

Indicates an alias for something to be created

2Full scroll

It represents content that can be scrolled in any direction

3Auto

Default, the browser sets the cursor

Cell< /p> means you can select a cell (or a group of cells)

context-menu< strong>

Indicates that the context menu is available

col-resize

Indicates that the column can be resized horizontally

Copy

Indicates the content to be copied

It is rendered as a crosshair

It renders the default cursor

means resize the box The edge of

means Adjust the cursor size in both directions

Indicates that things can be grabbed

means that something can be grabbed

< p>
means helpful

< p>
means to move something

means the edge of the box will move up (north)

Indicates that the edge of the box should be moved up and to the right (North/East)

means adjusting the cursor size in both directions

ns-resizeIndicates bidirectional adjustment of the cursor size

nw-resize means the edge of the box moves up and to the left (north/west)

##21

Indicates bidirectional resizing cursor

22

means that the dragged item cannot be dragged and dropped here

23

No cursor is rendered for element

24

It means that the requested action will not be executed

25

It is a pointer, representing a link

##26

##27

indicates that Rows can be resized vertically

28

means moving the edges of the box Move down (south)

29

represents the box Edge moves down and to the right (south/east)

30< /p>

Indicates that a border should be moved downward and left (south/west)

##31

Text

32

URL

< /strong>

33

vertical-text

34

w-resize

35

Wait

##36

< /p>Enlarge

37

Zoom out

38

Initial

39

Inheritance

The following is an example of implementing CSS cursor properties

Example