Cómo cambiar la apariencia del puntero del mouse en CSS

puede no ser Cambios en el puntero del mouse La propiedad más popular del mundo, pero sigue siendo una herramienta útil para los desarrolladores. Aunque los navegadores cambiarán automáticamente los punteros a ciertos objetos, como enlaces y algunos elementos arrastrables, los desarrolladores pueden obtener mejores resultados de Selección del puntero del mouse que desea específicamente.

Cambiar la forma del mouse en CSS

La apariencia del cursor está controlada por una propiedad CSS especial puntero. control Esta propiedad es de tipo puntero. Que se presenta cuando el usuario choca contra el objeto. Por ejemplo, pasar el mouse sobre el objeto asociado con la clase a continuación produce una flecha de arrastre de XNUMX direcciones:

.cursor { cursor: move;}

Cuando se pasa el mouse sobre el objeto, el usuario verá un puntero como el que se muestra a continuación.

Opciones de puntero estándar en CSS

Hay una amplia gama de opciones de indicadores que puede ajustar para su uso del indicador. Tenga en cuenta que "N" Y el "S" Y el "W" Y el "ELos que ve en la lista se refieren a los puntos cardinales de Norte, Sur, Este y Oeste. por ejemplo , cursor: e-cambiar tamaño; El controlador de tamaño aparece con una flecha en el lado "este" o derecho.

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.context-menu {cursor: context-menu;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

Creado por Chris Coyer, el mago detrás CSS-Tricks.com ، garabatos Para ayudar a mostrar las diferentes opciones de puntero en CSS.

Usar imágenes como puntero del mouse

Como muchas propiedades de CSS, la propiedad de puntero puede tomar atributos a través de la especificación de URL. Por ejemplo, la clase a continuación utilizará la imagen asociada para el puntero.

.cursor {cursor: url('path/to/image.png'), auto;}

Identificación automática después de ese indicador de respaldo. El atributo predeterminado mostrará qué puntero usaría normalmente el navegador para el objeto actual debajo del puntero. También puede seleccionar imágenes adicionales con una lista separada por comas o seleccionar cualquiera de los indicadores para que actúe como indicador alternativo.

.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}

Los navegadores no admiten animaciones de ningún tipo, ya sea en formato GIF, SVG o PNG. Pero los PNG transparentes funcionan en todos los navegadores web populares del mercado actual. Los SVG no son confiables en Firefox, pero funcionan bien en otros navegadores.

De forma predeterminada, el "punto caliente" del cursor se establecerá en la esquina superior izquierda de la imagen. Para hacer referencia a un "punto de acceso" diferente, seleccione un par de coordenadas (X, Y) En un puntero de llamada. Este ejemplo a continuación establecerá el punto de acceso como (3) , utilizando la parte superior izquierda como (0).

.cursor {cursor: url(cursor.svg) 3 3, pointer;}

Conclusión: utiliza estas funciones

Si está desarrollando un sitio web, puede agregar estas propiedades CSS a cualquier objeto en su sitio para cambiar el cursor que ve el usuario cuando pasa el mouse sobre el objeto. Si eres más aventurero, también puedes usar una extensión de navegador como Aguja أو Mono manipulador أو GreaseMonkey Para implementar CSS forzado en cualquier sitio web. De esta manera, puede mostrar su cursor personalizado cuando y donde quiera.