Cómo cambiar el aspecto del cursor

La propiedad de CSS, cursor, permite cambiar el aspecto del cursor sobre uno de los elementos presentes en una página web y, por tanto, modificar el que aparece por defecto. De este modo, el cliente visualizará de manera automática el tipo de cursor que hayas elegido para tu sitio web. En este artículo te enseñamos cómo hacerlo.

¿Cómo cambiar el aspecto de tu cursor?

Veamos en primer lugar un modelo de cómo pondríamos un cursor en forma de cruz en el cuerpo de una página:

body{ cursor:crosshair; }

Es posible dar diferentes estilos a varios elementos de la misma página. Por ejemplo, una cruz. O, como hemos visto antes para el cuerpo, un cursor en forma de reloj de arena para las imágenes y una mano para los enlaces:

body{ cursor: crosshair; } img{ cursor: wait; } a:link{ cursor: pointer; }

También es posible asignar un cursor personalizado a una página. Para ello, solo hay que poner en el código CSS la etiqueta deseada y acceder a la carpeta en la cual se encuentra tu cursor:

cursor: url(tu_cursor_personalizado.cur'), pointer;

Existen muchos programas capaces de crear cursores personalizados, pero te recomendamos partir de aquellos que están ya hechos y modificarlos a tu gusto. Eso sí, siempre teniendo cuidado de hacer una copia de seguridad antes de comenzar (en Windows, ello puede hacerse en C:windowscursors).

Algunos ejemplos de estos programas son: CursorFX, IconArt y ArtCursors.

Nota: El tamaño de los cursores no debe superar 32x32 px.

¿Qué atributos posibles de esta propiedad se pueden realizar?

Aceptados por todos los navegadores

auto: Aspecto idéntico al del cursor predeterminado en la etiqueta que posee el atributo, no cambia nada.
default: Cursor predeterminado del navegador.
pointer: Cursor en forma de mano.
text: Cursor de edición de texto.
help: Cursor de ayuda.
wait: Cursor de espera.
progress: Cursor de progresión.
move: Cursor de desplazamiento.
crosshair: Cursor en forma de cruz.

Cursores de redimensionamiento

n-resize: Flecha apuntando hacia el norte o hacia arriba.
s-resize: Flecha apuntando al sur o hacia abajo.
e-resize: Flecha apuntando a la derecha.
w-resize: Flecha apuntando a la izquierda.
ne-resize: Flecha apuntando al noreste.
nw-resize: Flecha apuntando al noroeste.
se-resize: Flecha apuntando al sudeste.
sw-resize: Flecha apuntando al sudoeste.

No aceptado por todos los navegadores

Firefox y Opera, entre otros, ignoran estas directivas:

inherit: Cursor similar al de la etiqueta de la misma familia.
not-allowed: Cursor circular con una barra diagonal.
no-drop: Cursor en forma de mano con los dedos extendidos y un círculo con una barra diagonal.
col-resize: Cursor compuesto de una línea vertical con una flecha en cada extremo.
row-resize: Cursor compuesto de una línea horizontal con una flecha en cada extremo.