HTML cursor style

HTML cursor style

Put your cursor on the corresponding text and the mouse will display the effect

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