Cambiar el aspecto del cursor con CSS

Diciembre 2016



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.


Consulta también :
El documento «Cambiar el aspecto del cursor con CSS» de CCM (es.ccm.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo siempre y cuando respetes las condiciones de dicha licencia y des crédito a CCM.