Cómo cambiar el puntero del mouse en CSS

Es posible que los cambios de cursor no sean la propiedad más popular del mundo, pero sigue siendo una herramienta útil para los desarrolladores. Si bien los navegadores cambiarán automáticamente los cursores para ciertos objetos, como enlaces y algunos elementos que se pueden arrastrar, los desarrolladores pueden obtener mejores resultados al especificar el cursor deseado específicamente.

Cambiar el punto del mouse en CSS

La apariencia del cursor está controlada por el propiedad CSS del cursor. Esta propiedad controla el tipo de cursor representado cuando el usuario pasa el mouse sobre el objeto. Por ejemplo, al pasar el mouse sobre el objeto asociado con la clase siguiente, se produciría una flecha de arrastre de cuatro direcciones:

.cursor { cursor: move;}

Al pasar el mouse sobre el objeto, el usuario vería un cursor como el siguiente.

Te puede interesar:

Juegos de memoria gratuitos para adultos y personas mayores

Opciones de cursor estándar en CSS

Existe una amplia variedad de opciones de cursor que puede configurar para el uso del cursor. Tenga en cuenta que la «N», la «S», la «W» y la «E» que ve en la lista se refieren a las direcciones cardinales de norte, sur, este y oeste. Por ejemplo, cursor: e-resize; muestra un controlador de cambio de tamaño con una flecha en el lado «este» o en el lado 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;}

Chris Coyier, el mago detrás CSS-Tricks.com, creado este garabato para ayudar a mostrar las diversas opciones de cursor en CSS.

Usar imágenes como cursores

Como muchas propiedades de CSS, la propiedad del cursor también puede tomar atributos a través de especificaciones de URL. Por ejemplo, la clase siguiente usaría la imagen asociada para el cursor.

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

El auto luego especifica un cursor de respaldo. El atributo auto mostrará el cursor que el navegador usaría normalmente para el objeto actual debajo del cursor. También puede especificar imágenes adicionales con una lista separada por comas o especificar cualquiera de los cursores para que funcione como su cursor de reserva.

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

La animación de cualquier tipo, ya sea en GIF, SVG o PNG, no es compatible con los navegadores. Pero los archivos PNG transparentes funcionan en todos los navegadores web populares del mercado actual. Los SVG no son tan confiables en Firefox, pero funcionan bien en otros navegadores.

Te puede interesar:

MTE explica: las diferencias entre Su, Sudo Su, Sudo -s y Sudo -i

De forma predeterminada, el «punto caliente» del cursor se establecerá en la esquina superior izquierda de la imagen. Para indicar un «punto caliente» diferente, especifique un par de coordenadas (X, Y) en su llamada de cursor. Este ejemplo a continuación establecerá el punto de acceso rápido como (3,3), usando la parte superior izquierda como (0,0).

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

Conclusión: uso de estos atributos

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, TamperMonkey, o GreaseMonkey para ejecutar CSS arbitrario en la parte superior de un sitio web. De esta manera, puede mostrar su propio cursor personalizado cuando y donde quiera.