Cómo cambiar el puntero del mouse en CSS

Puede 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, pasar el mouse sobre el objeto asociado con la clase siguiente produciría una flecha de arrastre de cuatro direcciones:

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

Cambiar el puntero del mouse Css Mover el cursor

Opciones de cursor estándar en CSS

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

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 CSS, la propiedad del cursor también puede tomar atributos mediante especificaciones de URL. Por ejemplo, la clase siguiente usaría la imagen asociada para el cursor.

El auto luego especifica un cursor de respaldo. El atributo auto mostrará cualquier cursor que el navegador utilice 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.

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.

De forma predeterminada, el “punto de acceso” 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 activo como (3,3), usando la parte superior izquierda como (0,0).

Conclusión: uso de estos atributos

Si está desarrollando un sitio web, puede agregar estas propiedades CSS a cualquier objeto de 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 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.

¿Es útil este artículo?

¡Ayúdanos a difundirlo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *