Los cambios de cursor pueden no ser la propiedad más popular del mundo, pero siguen 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 específicamente el cursor deseado.
Cambiar el punto del mouse en CSS
La apariencia del cursor es 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, pasar el mouse sobre el objeto asociado con la clase a continuación produciría una flecha de arrastre de cuatro direcciones:
Al pasar el mouse sobre el objeto, el usuario vería un cursor como el que se muestra a continuación.
Opciones de cursor estándar en CSS
Hay una amplia variedad de opciones de cursor que puede configurar para su uso del cursor. Tenga en cuenta que la «N», «S», «O» y «E» que ve en la lista se refieren a los puntos 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 derecho o «este».
.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.comcreado este garabato para ayudar a mostrar las diversas opciones de cursor en CSS.
Uso de 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 a continuación usaría la imagen asociada para el cursor.
.cursor {cursor: url('path/to/image.png'), auto;}El auto después especifica un cursor de reserva. El atributo automático mostrará cualquier 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 respaldo.
.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 tan 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 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 como (3,3), utilizando 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, TamperMonkeyo GrasaMono 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.