Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

css mouse style syntax and 20 optional values (attributes)


May 04, 2021 CSS


Table of contents


We are no stranger to windows in a variety of mouse styles, when the mouse moves to different places, when the mouse performs different functions, when the system is in a different state, the shape of the mouse changes. A nd on the web page often only when the mouse on the hyperlink appears a hand shape, in other places do not seem to change, with the dynamic page appears not very harmonious. H ere you are taught to use CSS to define 20 mouse style shapes. In CSS, the cursor property is used to define the style of the mouse.


The syntax for controlling mouse styles with css is as follows:

<span style="cursor:*">文本或其它页面元素</span>

Replace the s with one of the following 20 optional values:

The cursor property is taken as follows, with the default value of default. Y ou might say, cursor property values so much, how do you remember? I n fact, we do not have to worry, in the actual development, we generally only use "default" and "pointer" two property values, the other generally rarely used. I f there's really no other way to do it, just come back and check the watch.

crosshair;


Cross the right heart

The cursor render as a crosshair

The cursor is represented as a cross-line

cursor: pointer;
cursor: hand;
Write two to take care of IE5, it only recognizes hand.

Hand

The cursor render as a pointer (a hand) that indicates a link

The cursor indicates a connection in the form of a hint (finger).

cursor: wait;

Wait/hourglass

The cursor indicates that the program is busy (often a watch or an hourglass)
The cursor indicates that the current program is busy (usually a table or an hourglass)

cursor: help;

Help

The cursor indicates that help is available (often a question mark or a balloon)
The cursor implies that the current position can be helped (usually a question mark or balloon)

cursor: no-drop;

Cannot be released

cursor: no-drop;

cursor: text;

Text/editing

The cursor indicates text
The cursor implies that the current location is text content

cursor: move;

The meddly removable object

The cursor indicates something that should be moved
The cursor implies that something should be moved

cursor: n-resize;

Change size up (North)

The cursor indicates that an edge of a box is to be moved up (north)
Edges can be moved up (North)

cursor: s-resize;

Change the size down (South)

The cursor indicates that an edge of a box is to be moved down (south)
Edges can be moved down (South)

cursor: e-resize;

Change the size to the right (East)

The cursor indicates that an edge of a box is to be moved right (east)
The edge of the box can be moved to the right (east) edge

cursor: w-resize;


Change the size to the left (West)

The cursor indicates that an edge of a box is to be moved left (west)
Edges can be moved to the left (West)

cursor: ne-resize;

Change the size up to the right (North East)

The cursor indicates that an edge of a box is to be moved up and right (north/east)
The cursor implies that the edge of the box can be moved to the top right (northeast)

cursor: nw-resize;

Change size up to left (North West)

The cursor indicates that an edge of a box is to be moved up and left (north/west)
Edges can be moved to the top left (Northwest)

cursor: se-resize;

Change the size down to the right (South East)

The cursor indicates that an edge of a box is to be moved down and right (south/east)
Edges can be moved down to the right (southeast)

cursor: sw-resize;

Changing the size to the left (South West)

The cursor indicates that an edge of a box is to be moved down and left (south/west)
Edges can be moved to the bottom left (Southwest)

cursor: auto;

Automatic

The browser sets a cursor
The browser sets a cursor

cursor:not-allowed;

Ban

cursor:not-allowed;

cursor: progress;

In process

cursor: progress;

cursor: default;

The system defaults

The default cursor (often an arrow)
Default cursor state (usually an arrow)

cursor: url(' # ');
The cursor file address (note that the file format must be:.cur or .ani).

User-defined (available animations)

The url of a custom cursor to be used.
Customize the url position of the cursor

Note: A lways define a generic cursor at the end of the list in case none of the url-defined cursors can be used
Note: Add a generic cursor at the end after you have defined the custom cursor in case those defined by the url are not available


Cursor's pointer is different from hand

cursor:hand has the same effect as cursor:pointer, and is like a hand cursor. S o why are there two, what's the difference between the two?

Use browser testing to draw the following conclusions:
cursor:hand: IE is fully supported. B ut firefox is not supported and has no effect.
cursor:pointer : is the standard for CSS2.0. S o firefox is supported, but IE5.0 is not supported by previous versions. I E6 starts to support.
So in order to be compatible with all major browsers, try to use cursor:pointer instead of cursor:hand.

Instance:

#div_default{cursor:default;}

#div_pointer{cursor:pointer;}


Try it out . . .
The preview in the browser looks like this:

css mouse style syntax and 20 optional values (attributes)

CSS Cursor mouse pointer style compatibility reference table

Below share a mouse pointer style compatibility online reference table, black icon: indicates that this property is compatible with this browser. /b10> Gray icon: This property is not compatible with this browser.

css mouse style syntax and 20 optional values (attributes)