Truquillos de desarrollo web y programación #1: cambiar el cursor del ratón mediante CSS

Muchas veces, durante mi trabajo como desarrollador web y programador, he necesitado solucionar pequeños problemas relativamente simples de los que no recordaba su solución exacta o que desconocía y necesitaba conocer. Imagino que a la mayoría de los que nos dedicamos a esto nos ha ocurrido muchas veces, y hemos tenido que recurrir a San Google, responsable de gran parte de los conocimientos adquiridos a lo largo de nuestra etapa de estudiantes y de currantes. Con todo esto, he pensado en crear una sección en el blog que recopile los diferentes “truquillos” de desarrollo web y de programación que me vaya encontrando por el camino y que crea que pueden ser curiosos y útiles para la gente.

El primer truquillo del que quiero hablar es el de cambiar el cursor del ratón en una página web utilizando CSS. Para ello, utilizaremos la propiedad CSS cursor. Si hemos modificado la propiedad cursor de un elemento HTML de la página con CSS, al pasar el ratón por encima de dicho elemento el cursor cambiará al que le hayamos indicado en la propiedad.

Los posibles valores que podemos dar a la propiedad cursor son los que se listan a continuación. Se puede comprobar el efecto de los diferentes valores pasando el ratón por encima de su recuadro.

cursor: auto;

cursor: default;

cursor: none;

cursor: help;

cursor: pointer;

cursor: progress;

cursor: wait;

cursor: crosshair;

cursor: text;

cursor: vertical-text;

cursor: alias;

cursor: copy;

cursor: move;

cursor: no-drop;

cursor: not-allowed;

cursor: e-resize;

cursor: n-resize;

cursor: ne-resize;

cursor: nw-resize;

cursor: s-resize;

cursor: se-resize;

cursor: sw-resize;

cursor: w-resize;

cursor: ew-resize;

cursor: ns-resize;

cursor: nesw-resize;

cursor: nwse-resize;

cursor: context-menu;

cursor: cell;

cursor: col-resize;

cursor: row-resize;

cursor: all-scroll;

También existe la posibilidad de indicar un cursor personalizado con la propiedad cursor, indicando como valor url(cursor.cur);, siendo cursor.cur la url del fichero con nuestro cursor personalizado. En el estándar no se especifica nada sobre el formato del fichero de cursor, se pueden utilizar por ejemplo cursores en formato CUR (similar al formato ICO) y en formato SVG.

Para más información sobre la propiedad cursor de CSS podéis mirar en la descripción de la propiedad cursor en el texto sobre el estándar. Espero que os sea útil.