Atributo cursor de CSS

Definición y uso

La propiedad cursor especifica el tipo de cursor (forma) que se debe mostrar.

Esta propiedad define la forma del cursor que se utiliza cuando el puntero del ratón se coloca dentro del rango del borde de un elemento (aunque CSS2.1 no define por qué borde determina este rango).

Véase también:

Tutorial de CSS:Posicionamiento CSS

Manual de referencia del DOM HTML:Atributo cursor

Ejemplo

Diferentes cursores:

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

Prueba por ti mismo

Sintaxis de CSS

cursor: value;

Valor del atributo

Valor Descripción
url

URL del cursor personalizado que se debe usar.

Notas:Siempre defina un cursor común al final de esta lista, en caso de que no haya un cursor disponible definido por URL.
default Cursor predeterminado (generalmente una flecha).
auto Predeterminado. Cursor configurado por el navegador.
crosshair El cursor se presenta como una cruz.
pointer El cursor se presenta como un puntero que indica un enlace (una mano).
move Este cursor indica que un objeto puede ser movido.
e-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse hacia la derecha (este).
ne-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse hacia arriba y a la derecha (norte/oriente).
nw-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse hacia arriba y a la izquierda (norte/oriente).
n-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse hacia arriba (norte).
se-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse hacia abajo y a la derecha (sur/oriente).
sw-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse hacia abajo y a la izquierda (sur/este).
s-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse hacia abajo (sur).
w-resize Este cursor indica que los bordes del cuadro rectangular pueden moverse a la izquierda (oeste).
text Este cursor indica texto.
wait Este cursor indica que el programa está ocupado (generalmente una mesa o un reloj de arena).
help Este cursor indica ayuda disponible (generalmente un signo de interrogación o una globa).

Detalles técnicos

Valor predeterminado: auto
Herencia: sí
Versión: CSS2
Sintaxis de JavaScript: object.style.cursor="crosshair"

Ejemplo TIY

Cambiar el cursor
Este ejemplo muestra cómo cambiar el cursor.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
5.0 5.5 4.0 5.0 9.6

Notas:Opera 9.3 y Safari 3 no son compatibles url valor.