Tipos de cursores con CSS

La propiedad cursor en CSS nos permite seleccionar el tipo de cursor (puntero) que tendrá un determinado elemento en nuestra aplicación.

Por ejemplo:


<div style='cursor: pointer;'>

Contenido aquí...

</div>

Este ejemplo mostrará un cursor de tipo “pointer” (la tradicional manito que aparece sobre los links estándar).

Los tipos de cursores predeterminados disponibles son:

default

pointer

e-resize ó w-resize

n-resize ó s-resize

ne-resize ó sw-resize

nw-resize ó se-resize

crosshair

move

help

text

wait

También es posible definir cursores personalizados. Para ello debemos utilizar el parámetro “url” de la propiedad cursor:


<div style='cursor: url(images/mi-cursor.cur);'>

Este bloque tendrá un cursor personalizado

</div>

Los cursores personalizados no son mas que bitmaps (imágenes BMP) con la extensión “.cur”.

Es recomendable en caso de usar cursores personalizados definir también un cursor estandar, el cual se mostrará en caso de no poder mostrarse el cursor definido:


<div style='cursor: url(images/mi-cursor.cur), pointer;'>

Este bloque tendrá un cursor personalizado.

Si no se puede cargar se mostrará el segundo definido: pointer.

</div>