| cursor:auto; | Automatic |
| cursor:all-scroll; | Scroll up, down, left, right and in any direction |
| cursor:crosshair; | Crosshair |
| cursor:pointer; | Hands |
| cursor:wait; | Waiting |
| cursor:help; | Help |
| cursor:no-drop; | Cannot be released |
| cursor:text; | Writing/Editing |
| cursor:move; | Movable Objects |
| cursor:vertical-text; | Editable vertical text cursor |
| cursor:n-resize; | Change size upward (North) |
| cursor:s-resize; | Change size downward (South) |
| cursor:e-resize; | Change size to the right (East) |
| cursor:w-resize; | Change size to the left (West) |
| cursor:ne-resize; | Change size up and right (North East) |
| cursor:nw-resize; | Change size up and left (North West) |
| cursor:se-resize; | Change size down and right (South East) |
| cursor:sw-resize; | Change size down and left (South West) |
| cursor:col-resize; | Can be resized horizontally |
| cursor:row-resize; | Can be resized vertically |
| cursor:not-allowed; | Prohibited |
| cursor:progress; | Processing |
| cursor:default; | System default |
|
cursor:url('#');# is the cursor file address (Note that the file format must be: .cur or .ani) |
User-defined (animation available) Note: After defining the custom cursor, add a general cursor at the end, In case the cursors defined by those urls cannot be used |
Description:
cursor attribute: Set the type (shape) of the displayed cursor.
The value of this attribute can be multiple, separated by commas;
If the first value cannot be found and cannot be displayed, the second value will be tried, and so on;
If all values are unavailable, this property will not have any effect and the cursor will not be changed.
For example: {cursor:pointer,wait,help;}, from pointer to wait, then to help, if it is not applied, the cursor attribute will have no effect.
Now let’s take an example of a “hand” cursor. There are two ways to write it:
Rendering:
| cursor:pointer; | Hands |
The first is inline style: (inline style: write CSS styles in tags)
<span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pointer"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="cursor:pointer;"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>cursor:pointer;<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>手<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>The second type is internal style: (internal style: positioned in by the