La propiedad cursor permite cambiar el aspecto del cursor sobre un elemento de una página web.
El cliente visualizará de manera automática el tipo de cursor que hayas elegido.
Ejemplo
Ejemplo de 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.
Ejemplo de un cursor en forma de cruz 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;
}
Incluso es posible asignar un cursor personal a una página. Para ello, solo hay que poner en el código CSS la etiqueta deseada partiendo del principio que el cursor está en la carpeta actual:
cursor: url(tu_cursor_personalizado.cur'), pointer;
Existen muchos programas capaces de crear cursores personalizados, lo mejor es partir de cursores ya hechos y modificarlos, teniendo cuidado de hacer una copia de respaldo antes de cualquier manipulación (bajo Windows, se encuentran en C:windowscursors).
Por ejemplo puedes utilizar este programa:
Znsoft IconMaker
El tamaño de los cursores no debe superar 32x32 px.
Lista de atributos posibles de esta propiedad
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.
Véase también
Comunidad de asistencia y consejos.
El artículo original fue escrito por
RAD ZONE. Traducido por
Carlos-vialfa.
