CSS: Cambia la apariencia del cursor.

La propiedad del cursor le permite cambiar la apariencia del cursor en un elemento de una página web.

El cliente mostrará automáticamente el cursor en su computadora que coincida con el tipo de cursor que elija.

Ejemplo

Ejemplo de un cursor en forma de cruz (punto de mira):

 cuerpo {cursor: punto de mira; } 

Por supuesto, se pueden dar diferentes estilos a varios elementos de la misma página.

Ejemplo de un estilo como una cruz en el estilo "cuerpo" decorado con una forma de reloj de arena en las imágenes y una mano en los enlaces.

 cuerpo {cursor: punto de mira; } img {cursor: espera; } a: enlace {cursor: puntero; } 

Lista de atributos posibles

Aceptado por todos los navegadores.

  • Auto: la apariencia igual que el cursor predeterminado en la etiqueta que tiene el atributo no cambia.
  • Predeterminado: Cursor predeterminado del navegador.
  • Puntero: Mano en forma de cursor con su dedo desplegado.
  • Texto: Edición de texto con el cursor.
  • Ayuda: Ayuda del cursor.
  • Espera: espera cursor
  • Progreso: progresión del deslizador.
  • Mover: movimiento del cursor.
  • Cruz: Cruz en forma de cursor.

Cursores redimensionando

  • N-redimensionar: redimensiona el cursor hacia abajo.
  • S-redimensionar: redimensionar el deslizador de arriba a abajo.
  • E-redimensionar: redimensionar cursor de izquierda a derecha.
  • W-redimensionar: redimensionar cursor de derecha a izquierda.
  • Ne-redimensionar: Redimensionar Cursor abajo a la izquierda arriba a la derecha.
  • Nw-resize: cambia el tamaño del cursor abajo a la derecha arriba a la izquierda.
  • Se-redimensionar: redimensionar el cursor de arriba a izquierda a abajo a la derecha.
  • Cambiar tamaño: cambiar el tamaño del cursor de arriba a abajo a la izquierda.
    • Tenga en cuenta que: De hecho, es fácil recordar todas estas propiedades a la vez.
    • n, s, e, w corresponden al norte, sur, este, oeste, es decir, arriba, abajo, derecha, izquierda.
    • Simplemente indique la dirección en la que apunta el cursor, seguido del curso "-resize".

No es compatible con todos los navegadores

Firefox y Opera, ignora las siguientes pautas.

  • Heredar: Incluso como la etiqueta principal del cursor.
  • No permitido: ponche redondo en forma de cursor.
  • Sin caída: Mano en forma de cursor con los dedos y un taco redondo desplegado.
  • Col-redimensionar: el cursor es dos líneas verticales con una flecha en cada lado.
  • Tamaño de fila: el cursor es dos líneas horizontales con una flecha en cada lado.
Artículo Anterior Artículo Siguiente

Los Mejores Consejos