in

CSS – Cursores


los cursor La propiedad de CSS le permite especificar el tipo de cursor que debe mostrarse al usuario.

Un buen uso de esta propiedad es el uso de imágenes para botones de envío en formularios. De forma predeterminada, cuando un cursor se desplaza sobre un enlace, el cursor cambia de un puntero a una mano. Sin embargo, no cambia la forma de un botón de envío en un formulario. Por lo tanto, cada vez que alguien coloca el cursor sobre una imagen que es un botón de envío, proporciona una pista visual de que se puede hacer clic en la imagen.

La siguiente tabla muestra los posibles valores para la propiedad del cursor:

No Señor. Valor y descripción
1

auto

La forma del cursor depende del área de contexto sobre la que se encuentra. Por ejemplo, una I sobre un mensaje de texto, una entrega de un enlace, etc.

2

punto de mira

Una cruz o un signo más

3

defecto

Una flecha

4

puntero

Una mano apuntando (en IE 4 este valor es mano)

5

moverse

El bar

6

cambio de tamaño electrónico

El cursor indica que un borde de un cuadro se debe mover hacia la derecha (este)

7

ne-redimensionar

El cursor indica que un borde de un cuadro se debe mover hacia arriba y hacia la derecha (norte / este)

8

nw-resize

El cursor indica que un borde de un cuadro se debe mover hacia arriba y hacia la izquierda (norte / oeste)

9

n-redimensionar

El cursor indica que un borde de un cuadro se moverá hacia arriba (norte)

10

cambiar el tamaño

El cursor indica que un borde de un cuadro se debe mover hacia abajo y hacia la derecha (sur / este)

11

sw-resize

El cursor indica que el borde de un cuadro se debe mover hacia abajo y hacia la izquierda (sur / oeste)

12

s-cambiar el tamaño

El cursor indica que un borde de un cuadro se moverá hacia abajo (sur)

13

w-redimensionar

El cursor indica que un borde de un cuadro se debe mover hacia la izquierda (oeste)

14

texto

El bar

15

Espere

Un reloj de arena

dieciséis

ayuda

Un signo de interrogación o un globo, ideal para usar sobre los botones de ayuda.

17

La fuente de un archivo de imagen de cursor

NOTA – Debe intentar usar solo estos valores para agregar información útil para los usuarios y, en algunos lugares, esperarían ver ese cursor. Por ejemplo, usar el punto de mira cuando alguien pasa el cursor sobre un enlace puede confundir a los visitantes.

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <p>Move the mouse over the words to see the cursor change:</p>
      
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html> 

Producirá el siguiente resultado:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

http

Forma completa HTTP | ¿Qué es el protocolo de transferencia de hipertexto?

apple touch icon@2

¿Cómo definir correctamente la autenticación HTTP básica usando cURL?