El puntero es el icono que vemos en nuestra pantalla cuando movemos el ratón en un dispositivo PC. En este post, te mostramos cómo cambiar de puntero en CSS y qué tipos existen, ya que es una herramienta clave en la navegación de una página web, pues nos permite explorar e interactuar con sus elementos.
¿Por qué cambiar de puntero en CSS?
Los diseñadores de la web se han dado cuenta de la importancia del puntero en la navegación de una página web. Por ello, han creado distintos iconos de puntero para comunicar diferentes significados. Cambiar de puntero en CSS puede mejorar la experiencia de usuario al darle pistas sobre qué interacciones puede tener con los elementos de un sitio web.
Podemos, por ejemplo, cambiar de puntero en CSS cuando el ratón pasa sobre elementos con los que el usuario puede interactuar. Digamos que cambiamos el puntero a una mano cuando hay un menú hamburguesa, esto le dice al usuario que puede clicar sobre el elemento y en qué zona específica funcionará.
Puedes cambiar el puntero de cualquier elemento insertando la propiedad cursor en el selector que desees. De este modo, puedes seleccionar elementos específicos, clases, ID o tipos de elemento según lo que necesites. Si tienes dudas sobre los selectores que existen en CSS, te invitamos a leer sobre selectores básicos y selectores múltiples en CSS.
Tipos de puntero en CSS
- auto: este es el puntero por defecto que conocemos.
- pointer: significa que podemos hacer clic sobre el elemento; es una mano con el índice extendido.
- zoom-in/zoom out: se representan con una lupa con el símbolo de más o menos; indican que podemos hacer zoom in o out haciendo clic.
- text: representa que podemos empezar un texto o editarlo en esta zona.
- none: hace que no haya un puntero cuando pasemos sobre el elemento.
- grab/grabbing: estas dos opciones representan, respectivamente, que podemos agarrar un elemento y que un elemento está agarrado.
- cell: se usa en celdas en softwares de datos.
- no-drop/ no-allowed: se representan con un círculo rojo con una línea diagonal en la mitad; quieren decir que no se puede soltar un elemento sobre esa zona o no hay interacción posible.
- progress: representa que hay un elemento cargando; se ve como el puntero auto con un spinner al lado.
- -resize: representa un conjunto de opciones con diversos iconos para distintos elementos. En general, indican que podemos modificar el tamaño del elemento.
Puedes conocer más sobre las opciones de la propiedad CSS cursor y verlas en acción en esta demostración de w3schools.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo cambiar de puntero en CSS y por qué es útil hacerlo ¿quieres seguir aprendiendo sobre cómo mejorar la experiencia de usuario desde el desarrollo web? Gracias al Desarrollo Web Full Stack Bootcamp continuarás aprendiendo sobre los lenguajes de programación HTML y CSS para crear tu propio sitio web con ayuda de nuestros profesores y convertirte en un experto. No esperes más para cumplir tu sueño de ser un desarrollador web y ¡matricúlate!
