May 04, 2021 CSS
1. Cursor's pointer is different from hand
3. CSS Cursor mouse pointer style compatibility reference table
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;
|
|
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)
|
cursor: help; |
|
Help |
The cursor indicates that help is available (often a question mark or a balloon)
|
cursor: no-drop; |
|
Cannot be released |
cursor: no-drop; |
cursor: text; |
|
Text/editing |
The cursor indicates text
|
cursor: move; |
|
The meddly removable object |
The cursor indicates something that 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)
|
cursor: s-resize; |
|
Change the size down (South) |
The cursor indicates that an edge of a box is to 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)
|
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)
|
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)
|
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)
|
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)
|
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)
|
cursor: auto; |
|
Automatic |
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)
|
cursor: url(' # ');
|
|
User-defined (available animations) |
The url of a custom cursor to be used.
Note:
A
lways define a generic cursor at the end of the list in case none of the url-defined cursors can be used
|