CSS - Cursores

La propiedad de cursor de CSS le permite especificar el tipo de cursor que se debe mostrar al usuario.

Un buen uso de esta propiedad es el uso de imágenes para enviar botones 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, un mensaje de texto, una entrega de un enlace, etc.
2	crosshair Una cruz o un signo más
3	default Una flecha
4	pointer Una mano apuntando (en IE 4 este valor es mano)
5	move El bar
6	e-resize El cursor indica que un borde de un cuadro se debe mover hacia la derecha (este)
7	ne-resize El cursor indica que el 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-resize El cursor indica que un borde de un cuadro se moverá hacia arriba (norte)
10	se-resize 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 un borde de un cuadro se debe mover hacia abajo y hacia la izquierda (sur / oeste)
12	s-resize El cursor indica que un borde de un cuadro se moverá hacia abajo (sur)
13	w-resize El cursor indica que un borde de un cuadro se debe mover hacia la izquierda (oeste)
14	text El bar
15	wait Un reloj de arena
dieciséis	help Un signo de interrogación o un globo, ideal para usar sobre los botones de ayuda
17	<url> La fuente de un archivo de imagen de cursor

NOTE- 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 la cruz 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:

↰ Previous page Next page ↱