En CSS, los cursores se utilizan para cambiar la apariencia del cursor del ratón cuando se encuentra sobre un elemento interactivo. Esto permite personalizar la forma del cursor y proporcionar retroalimentación visual al usuario.
CSS proporciona una variedad de valores para la propiedad cursor, que se utiliza para especificar el estilo del cursor.
.div{
cursor: crosshair;
}
4. Cursores en CSS
En la siguiente tabla se pueden ver algunos ejemplos de diferentes cursores en CSS:
| Valor | Descripción |
|---|---|
| crosshair | Cursor tipo cruz para tareas en las que se requiere precisión. |
| help | Interrogación. Cursor de ayuda. |
| move | Flechas hacia todos lados. Cursor para mover elementos. |
| pointer | Mano o apuntador. Cursor para hacer clic. |
| progress | Barra progreso o similar. Cursor que indica que se está trabajando en segundo plano. |
| text | Cursor que permite seleccionar texto. |
| wait | Cursor que indica que se debe esperar. |
| vertical-text | Flecha vertical, utilizado para texto en orientación vertical. |
| alias | Flecha diagonal, utilizado para indicar que se puede acceder a un enlace o recurso externo. |
| no-drop | Círculo con una línea diagonal, utilizado para indicar que no se permite soltar el elemento arrastrado. |
| grab | Mano cerrada, utilizado para indicar que el elemento se puede agarrar |
| grabbing | Mano abierta, utilizado para indicar que el elemento está siendo arrastrado o agarrado. |
| zoom-in | Símbolo de lupa con un signo de más, utilizado para indicar que se puede hacer zoom in. |
| zoom-out | Símbolo de lupa con un signo de menos, utilizado para indicar que se puede hacer zoom out. |
| not-allowed | Círculo con una línea diagonal, utilizado para indicar que la interacción no está permitida. |
| cell | Cursor tipo cruz, utilizado en hojas de cálculo para ajustar celdas. |
| copy | Puntero con un símbolo de copia, utilizado para indicar que se puede realizar una copia de un elemento. |
| ew-resize | Flecha bidireccional horizontal, utilizado para indicar que se puede ajustar el tamaño horizontalmente. |
| ns-resize | Flecha bidireccional vertical, utilizado para indicar que se puede ajustar el tamaño verticalmente. |
| nwse-resize | Flecha bidireccional diagonal, utilizado para indicar que se puede ajustar el tamaño diagonalmente en dirección noroeste-sureste. |
| nesw-resize | Flecha bidireccional diagonal, utilizado para indicar que se puede ajustar el tamaño diagonalmente en dirección noreste-suroeste. |
| col-resize | Flecha bidireccional horizontal con una línea vertical, utilizado para indicar que se puede ajustar el tamaño de una columna. |
| row-resize | Flecha bidireccional vertical con una línea horizontal, utilizado para indicar que se puede ajustar el tamaño de una fila. |
| context-menu | Puntero con un símbolo de menú, utilizado para indicar que se puede abrir un menú contextual. |
| none | No se muestra ningún cursor. |
| Personalized | Imagen o valor personalizado en el cursor. |
Estas explicaciones proporcionan una descripción breve de cada cursor, pero es posible encontrar más detalles y variaciones de estos cursores en la especificación CSS y en la documentación de los navegadores. Es importante tener en cuenta que algunos valores de cursor pueden no ser compatibles en todos los navegadores o en todos los elementos. Veamos cómo se visualizan los cursores en un ejemplo práctico:
Ejemplo
Ejemplo
Pasa el cursor por encima de cada contenedor para ver el resultado de cada valor de la propiedad cursor: