Comparación de estilo de mouse de cursor CSS, introducción detallada de estilo de mouse

Ejecute el siguiente código directamente para abrir el efecto

<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>

Ejecute el código anterior y luego apunte el mouse a diferentes elementos HTML, puede encontrar que al señalar diferentes elementos, el estilo del mouse cambiará en consecuencia.

En el proceso de navegar por la web, cuando pasamos el mouse sobre ciertos elementos, el estilo del mouse cambiará en consecuencia. Por ejemplo, cuando el mouse apunta al texto, el estilo del mouse cambiará para parecerse a una letra mayúscula I; cuando el mouse apunta a un enlace, el mouse cambiará a la forma de una mano pequeña, etc.

Además de estos cambios predeterminados, también puede cambiar el estilo del mouse (cursor) en la página web a través de la propiedad del cursor en CSS.Los valores opcionales de la propiedad del cursor se enumeran en la siguiente tabla:

valor de atributo	diagrama esquemático	describir
auto		El valor predeterminado, el navegador determina el estilo del cursor para mostrar de acuerdo con el contexto actual
por defecto		Cursor predeterminado, independientemente del contexto, generalmente una flecha
ninguno		no mostrar cursor
inicial		Establezca esta propiedad en su valor predeterminado
tu heredas		A partir del valor del atributo de cursor base del elemento principal
Menú de contexto		Indica que el menú contextual está disponible
ayuda		dijo útil
puntero		representa un enlace
progreso		Un indicador de progreso, que indica que el programa está realizando algún procesamiento, pero aún puede realizar algunas operaciones en esta interfaz (diferente a esperar)
esperar		Indica que el programa está ocupado y debe esperar a que el programa apunte a la finalización
celúla		Indica que se puede seleccionar una celda (o grupo de celdas)
punto de mira		una cruz simple
texto		representa texto que se puede seleccionar
texto vertical		Representa texto vertical seleccionable
alias		Indica que se va a crear un alias o acceso directo
Copiar		Indica que algo se puede copiar.
mover		Indica que el objeto debajo del mouse se puede mover
ninguna gota		Indica que el elemento arrastrado no se puede colocar en la ubicación actual
No permitido		expresar que algo no se puede hacer
desplazamiento completo		Indica que el objeto se puede desplazar (traducir) en cualquier dirección
redimensionar col		Indica que la columna se puede redimensionar horizontalmente
redimensionar fila		Indica que la fila se puede cambiar de tamaño verticalmente
n-cambiar tamaño		Indica que el borde del objeto puede moverse hacia arriba (hacia el norte)
e-cambiar tamaño		Indica que el borde del objeto se puede mover a la derecha (este)
s-cambiar tamaño		Indica que el borde del objeto se puede mover hacia abajo (sur)
w-cambiar tamaño		Indica que el borde del objeto se puede mover hacia la izquierda (oeste)
qué-cambiar el tamaño		Indica que el borde del objeto se puede mover hacia arriba y hacia la derecha (norte/este)
nw-cambiar tamaño		Indica que el borde del objeto se puede mover hacia arriba y hacia la izquierda (norte/oeste)
cambiar el tamaño		Indica que el borde del objeto se puede mover hacia abajo y hacia la derecha (sur/este)
sw-cambiar tamaño		Indica que el borde del objeto se puede mover hacia abajo y hacia la izquierda (sur/oeste)
ew-cambiar tamaño		Representa un cursor que puede cambiar el tamaño de un objeto en ambas direcciones.
ns-cambiar tamaño
nuevo-cambiar tamaño
nwse-cambiar tamaño
acercarse		Indica que algo se puede ampliar.
disminuir el zoom		Indica que algo puede reducirse
agarrar		Indica que algo se puede agarrar (arrastrar)
agarrando		Indica que algo ha sido agarrado
URL ("")		Personalice el estilo del cursor, el contenido entre paréntesis es la ruta del archivo de origen de la imagen del cursor