CSS cursor mouse style comparison, detailed mouse style introduction

Run the following code directly to open the effect

<html>
<head>
    <title>鼠标样式大比拼</title>
    <style>
        body{display: flex;flex-wrap:wrap;align-content: flex-start;}
        div{margin: 10px;width: 150px;height: 150px;display: flex;justify-content: center;text-align: center;align-items: center;background-color: #00000011;}
        div:hover{background-color: #00000022;}
        .auto{cursor:auto;}
        .default{cursor:default;}
        .none{cursor:none;}
        .initial{cursor:initial;}
        .inherit{cursor:inherit;}
        .context-menu{cursor:context-menu;}
        .help{cursor:help;}
        .pointer{cursor:pointer;}
        .progress{cursor:progress;}
        .wait{cursor:wait;}
        .cell{cursor:cell;}
        .crosshair{cursor:crosshair;}
        .text{cursor:text;}
        .vertical-text{cursor:vertical-text;}
        .alias{cursor:alias;}
        .copy{cursor:copy;}
        .move{cursor:move;}
        .no-drop{cursor:no-drop;}
        .not-allowed{cursor:not-allowed;}
        .all-scroll{cursor:all-scroll;}
        .col-resize{cursor:col-resize;}
        .row-resize{cursor:row-resize;}
        .n-resize{cursor:n-resize;}
        .e-resize{cursor:e-resize;}
        .s-resize{cursor:s-resize;}
        .w-resize{cursor:w-resize;}
        .ne-resize{cursor:ne-resize;}
        .nw-resize{cursor:nw-resize;}
        .se-resize{cursor:se-resize;}
        .sw-resize{cursor:sw-resize;}
        .ew-resize{cursor:ew-resize;}
        .ns-resize{cursor:ns-resize;}
        .zoom-out{cursor:zoom-out;}
        .grab{cursor:grab;}
        .grabbing{cursor:grabbing;}
    </style>
</head>
<script>
    let cursors = [
        'auto',
        'default',
        'none',
        'initial',
        'inherit',
        'context-menu',
        'help',
        'pointer',
        'progress',
        'wait',
        'cell',
        'crosshair',
        'text',
        'vertical-text',
        'alias',
        'copy',
        'move',
        'no-drop',
        'not-allowed',
        'all-scroll',
        'col-resize',
        'row-resize',
        'n-resize',
        'e-resize',
        's-resize',
        'w-resize',
        'ne-resize',
        'nw-resize',
        'se-resize',
        'sw-resize',
        'ew-resize',
        'ns-resize',
        'zoom-out',
        'grab',
        'grabbing',
    ]
    document.write(cursors.map(v => (`<div  class="${v}" >${v}</div>`)).join(''));
</script>
</html>

Run the above code, and then point the mouse to different HTML elements, you can find that when pointing to different elements, the style of the mouse will change accordingly.

In the process of browsing the web, when we move the mouse over certain elements, the style of the mouse will change accordingly. For example, when the mouse points to text, the style of the mouse will change into a capital letter I; when the mouse points to a link, the mouse will change into the shape of a small hand, etc.

In addition to these default changes, you can also change the style of the mouse (cursor) in the web page through the cursor property in CSS. The optional values of the cursor property are listed in the following table:

attribute value	schematic diagram	describe
auto		The default value, the browser determines the cursor style to display according to the current context
default		Default cursor, regardless of context, usually an arrow
none		do not show cursor
initial		Set this property to its default value
you inherit		From the value of the base cursor attribute of the parent element
context-menu		Indicates that the context menu is available
help		said helpful
pointer		represents a link
progress		A progress indicator, indicating that the program is performing some processing, but you can still do some operations on this interface (different from wait)
wait		Indicates that the program is busy and you should wait for the program to point to completion
cell		Indicates that a cell (or group of cells) can be selected
crosshair		a simple crosshair
text		represents text that can be selected
vertical-text		Represents selectable vertical text
alias		Indicates that an alias or shortcut is to be created
copy		Indicates that something can be copied
move		Indicates that the object under the mouse can be moved
no-drop		Indicates that the dragged item cannot be placed at the current location
not-allowed		express that something cannot be done
all-scroll		Indicates that the object can be scrolled (translated) in any direction
col-resize		Indicates that the column can be resized horizontally
row-resize		Indicates that the row can be resized vertically
n-resize		Indicates that the edge of the object can move up (to the north)
e-resize		Indicates that the edge of the object can be moved to the right (east)
s-resize		Indicates that the edge of the object can be moved down (south)
w-resize		Indicates that the edge of the object can be moved to the left (west)
what-resize		Indicates that the edge of the object can be moved up and to the right (north/east)
nw-resize		Indicates that the edge of the object can be moved up and to the left (north/west)
se-resize		Indicates that the edge of the object can be moved down and to the right (south/east)
sw-resize		Indicates that the edge of the object can be moved down and to the left (south/west)
ew-resize		Represents a cursor that can resize an object in both directions
ns-resize
nesw-resize
nwse-resize
zoom-in		Indicates that something can be enlarged
zoom-out		Indicates that something can be narrowed down
grab		Indicates that something can be grabbed (dragged)
grabbing		Indicates that something has been grabbed
url(“”)		Customize the style of the cursor, the content in brackets is the source file path of the cursor image