¿Cómo Personalizar el Cursor del Ratón con CSS?

¿Cómo personalizar el cursor del ratón con CSS?

Cuando estamos diseñando una web, usamos las hojas de estilo o código CSS para darle el formato que más nos gusta. CSS tiene multitud de opciones de personalización y hoy vamos a hablar de una que afecta al puntero del ratón.

Gracias a la opción “cursor” podemos modificar el puntero de nuestro ratón a nuestro gusto. Lo único que hay que hacer es añadirlo en la clase o en el id que queramos, y al posarnos sobre ella el cursor cambiará según le indiquemos. Esto es muy útil cuando queremos mostrarle al usuario que puede hacer click en un elemento, cambiar su tamaño, moverlo…

Esta opción no solo nos permite usar las imágenes predefinidas por el sistema operativo, sino que nos permite insertar imágenes definiendo una url como en el siguiente ejemplo.

.puntero_raton{cursor:url(https://midireccion.com/img/cursor.gif), auto;}

Al poner el valor “auto” si no encuentra la url o no puede cargar la imagen se establecerá el cursor automático del sistema.

A continuación se muestra una lista con algunos de los punteros disponibles:

cursores