Aprende a usar la pseudo-clase cursor de CSS que nos permite cambiar el puntero del ratón cuando se sitúa sobre elementos de la página web.
En este artículo vamos a aprender una de las posibilidades básicas que nos ofrece CSS con las que podemos aportar un poco de significado a las interfaces, de modo que podamos ayudar a interpretar al usuario la función de estas. Lo que vamos a aprender consiste en aplicar estilos para cambiar los punteros del ratón cuando el usuario lo sitúa sobre ciertas partes de la página.
Qué son los cursores del ratón
Los cursores son las imágenes que aparen en la pantalla en el lugar exacto de la pantalla donde está situado el ratón (mouse en inglés). Como cursores nos referimos al puntero del ratón: la típica flechita o cualquier otro dibujo que puede tener.
Cuando estamos programando una aplicación de interfaz gráfica podemos cambiar el cursor de un elemento de la página, esto es, cambiar la imagen del cursor al posicionarse con el ratón sobre elementos de la página que nosotros queramos. Por supuesto, cuando estamos desarrollando páginas web esto también es posible y lo haremos mediante CSS.
Nuestro sistema operativo posee cursores por defecto. En Windows podemos encontrar varios cursores que se activan cuando pasamos por "ciertas zonas" de nuestra pantalla. Por ejemplo, cuando nos posicionamos sobre un link, la típica flechita (denominada default en CSS) cambia por la manito (cursor CSS pointer). Como en el ejemplo anterior, podemos encontrar decenas de situaciones en donde nuestro puntero cambia de imagen.
Cómo cambiar el puntero del ratón con CSS
Con la ayuda de las hojas de estilo en cascada, podemos forzar a nuestro sistema navegador que no se rija con las normas convencionales de los punteros, logrando así un atractivo diseño web, más claro y usable, donde el puntero de nuestro mouse puede llegar a ser de cualquiera de las formas disponibles en el sistema operativo, hasta una imagen de nuestra propia creación.
Aunque CSS nos ofrezca la posibilidad de cambiar el aspecto del cursor del ratón, esto es una acción que tenemos que llevar a cabo con bastante cuidado, desde el punto de vista de la usabilidad. Debemos saber que las personas están acostumbradas a visualizar ciertos tipos de cursor en ciertas ocasiones. Por ejemplo, al situarse sobre un enlace aparece siempre la mano, o al ponerse al borde de una ventana el cursor que aparece son la línea con flechas en los lados. Todos estos cursores tienen un significado que las personas conocen y no debemos cambiarlo a la ligera, a no ser que sea para ayudar, porque podemos liar a los usuarios en el uso con la interfaz de la página web.
Atributo cursor de css
El atributo que usamos en CSS para poder cambiar el cursor de un elemento se denomina cursor. Para aplicarlo simplemente lo colocamos como valor en el elemento del HTML que queremos manipular el cursor por defecto que mostraría.
cursor es lo que se conoce como una pseudo-clase de CSS.<span style="cursor: pointer">Esto tendría el cursor pointer al poner el ratón encima</span>
El cursor siempre aplica a la forma del puntero al poner el ratón encima. Como puedes ver, no necesitas usar pseudo clases como hover.
Modelos de cursores del ratón disponibles en CSS
A continuación presentamos una la lista de los cursores disponibles por defecto en el sistema operativo, y que también tendremos disponibles con CSS. En este listado aparece el nombre del cursor (nombre de la pesudoclase CSS que tenemos que utilizar para cambiar el cursor) y el tipo de cursor que se trata.
- default (flecha)
- crosshair (cruz)
- e-resize (flecha que apunta a la derecha)
- hand (mano)
- help (signo de pregunta)
- move (cruz con flechas en los extremos)
- n-resize (flecha que apunta hacia arriba)
- ne-resize (flecha que apunta al noreste)
- nw-resize (flecha que apunta al noroeste)
- pointer (mano)
- s-resize (flecha que apunta hacia abajo)
- se-resize (flecha que apunta hacia el sudeste)
- sw-resize (flecha que apunta hacia el sudoeste)
- text (I-beam)
- w-resize (flecha que apunta a la izquierda)
- wait (reloj de arena)
Ejemplos de personalización del puntero del ratón
Al igual que todas las propiedades del lenguaje CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo.
A todo el documento:
<html>
<title>Cambiar el cursor</title>
<head>
<style type="text/css">
body {
cursor: pointer;
}
</style>
</head>
<body>
<p>Hemos cambiado el cursor en todo el cuerpo</p>
<div>Es independiente la etiqueta</div>
</body>
</html>
También podemos cambiar el puntero sobre elementos particulares de la página, para lo cual usaremos los selectores de CSS de los elementos que queremos alcanzar.
En este otro ejemolo de documento HTML vemos la aplicación de los cursores disponibles en diversos elementos:
<html>
<title>Cambiar el cursor</title>
<head>
</head>
<body>
<h4 style="cursor: default">default</h4>
<h4 style="cursor: crosshair">crosshair</h4>
<h4 style="cursor: pointer">pointer</h4>
<h4 style="cursor: move">move</h4>
<h4 style="cursor: nw-resize">nw-resize</h4>
<h4 style="cursor: ne-resize">ne-resize</h4>
<h4 style="cursor: n-resize">n-resize</h4>
<h4 style="cursor: e-resize">e-resize</h4>
<h4 style="cursor: help">help</h4>
<h4 style="cursor: text">text</h4>
<h4 style="cursor: wait">wait</h4>
</body>
</html>
También es posible utilizar un cursor personalizado con una imagen que tengamos en nuestra web:
<html>
<title>Cambiar el cursor</title>
<head>
<style>
body {cursor : url("find.cur")}
</style>
</head>
<body>
<p>Hemos puesto un cursor mediante imagen</p>
</body>
</html>
Si te interesa profundizar en este caso tenemos además otro artículo que nos enseña a Cambiar el cursor o puntero del ratón por imágenes personalizadas con CSS
Notas sobre usabilidad / accesibilidad y los cursores del ratón
Antes de acabar quiero aportar unas notas sobre la usabilidad y el trabajo con los cursores del ratón que debemos al menos tener claras cuando estamos usando esta utilidad de las CSS.
Dispositivos de pantallas táctiles y cursores
Debes pensar que los dispositivos que tienen pantallas táctiles no muestran los cursores, porque simplemente se usan con el dedo. No existe ese concepto de un ratón que se mueve por la pantalla. Por ese motivo no debes hacer diseños que se basen en los cursores de CSS para poder funcionar.
Si necesitas aportar a tu usuario algún tipo de información sobre el uso de las interfaces cuando pasa el ratón, tienes que pensar en alternativas, como iconos, que aparezcan cuando la pantalla del usuario es pequeña. Esos mismos iconos también serán útiles para los usuarios de ordenadores de escritorio, por lo que ganarás igualmente en ellos.
Pensar si simplemente un cursor: pointer es suficiente
Luego, existe un tipo de cursor muy usado que es el valor "pointer". Este cursor muestra la mano esa que aparece cuando el contenido es un hiperenlace, mostrando al usuario que ese elemento se puede apretar, hacer click, para ir a otro lugar o desencadenar algún tipo de comportamiento.
.botonpersonalizado {
cursor: pointer;
}
Este estilo es muy útil y necesario a la hora de crear interfaces de usuario personalizadas e interactivas, sin embargo, a veces podemos usar simples enlaces y todavía mejora desde el punto de vista de la usabilidad.
<a href="#"><span class="botonpersonalizado">haz clic!</span></a>
¿En qué mejora el uso de los enlaces?
- Permite a los usuarios usar el tabulador para pasar de uno a otro lugar de la pantalla
- Para usuarios con problemas de visión les estamos indicando que ese elemento es clicable
Podemos por supuesto seguir apliando los estilos de la clase botonpersonalizado incluido el cursor:pointer, pero complementarlo con un enlace todavía será más claro. Eso sí, esta alternativa nos obligará en la mayoría de los casos a implementar un preventDefault() de Javascript si queremos evitar que un clic sobre el enlace cambie el valor de la barra de direcciones del navegador.
Federico Elgarte