Vista previa de cursor

Funciones

• Más de treinta palabras clave de `cursor`, agrupadas en básicas / carga / arrastrar y soltar / zoom / redimensionar / desplazamiento / celda
• Pasa el ratón por el bloque de vista previa y lo ves, sin adivinar
• Cada valor lleva su nombre en lenguaje llano (`nesw` es abajo-izquierda ↔ arriba-derecha, y así)
• ⚠️ Avisa de que el aspecto lo deciden el sistema operativo y el tema de punteros, así que una misma palabra clave cambia de un sistema a otro
• ⚠️ Avisa de que los dispositivos táctiles no muestran puntero, así que no puede ser la única pista
• Los valores pasan por una lista blanca antes de escribirse en la declaración: no se acepta entrada libre
• Copia un `.target { cursor: …; }` listo para pegar en una hoja de estilos

Cómo se usa

1. Busca la palabra clave en el desplegable, que va agrupado
2. Pasa el ratón por el bloque de abajo para verla en tu sistema
3. Copia el código y cambia el selector por el tuyo

Preguntas frecuentes

¿Por qué el puntero que veo no es como el de tu captura?

Porque el aspecto lo deciden el sistema operativo y el tema de punteros: el navegador solo le pasa la palabra clave al sistema para que la dibuje. El mismo `cursor: pointer` es una mano blanca en Windows, una mano que señala en macOS y otra cosa en cada escritorio de Linux; y quien tenga un tema de punteros propio, o el puntero grande de accesibilidad, es un caso más. Así que lo único que se garantiza aquí es qué palabra clave es. Para controlar el aspecto del todo hay que aportar una imagen propia con `url()`, lo que implica coordenadas del punto activo, límites de tamaño (los navegadores aceptan desde 32×32 hasta 128×128) y compatibilidad de formatos: casi nunca compensa.

¿Qué diferencia hay entre col-resize y ew-resize?

Se parecen casi por completo y significan cosas distintas. `ew-resize` es «puedes arrastrar esto de lado para cambiar el tamaño», una flecha doble genérica; `col-resize` es específicamente para el separador entre columnas de una tabla, y la mayoría de los sistemas lo dibujan como una flecha doble con una barra vertical. Los lectores de pantalla y algunas ayudas técnicas leen esa diferencia, así que usa `col-resize` para anchuras de columna y `ew-resize` para arrastres generales. `row-resize` es la misma idea para la altura de fila.

¿Por qué en el móvil no pasa nada?

Porque los dispositivos táctiles no muestran ningún puntero: `cursor` no tiene efecto en ellos. No es un problema de compatibilidad, sino del alcance propio de la propiedad: describe cómo es el puntero cuando el ratón está sobre un elemento, y una pantalla táctil no tiene estado «encima». Así que si una interfaz solo usa la forma del puntero para decir «esto se arrastra», en un teléfono esa información simplemente no está. El puntero solo puede ser una pista adicional; lo que importe hay que expresarlo también de otra forma: con palabras, con un tirador visible, con la forma de un icono.

¿Puedo usar una imagen propia como cursor?

Sí (`cursor: url(hand.cur), pointer`), pero esta herramienta no lo hace, por dos razones. Necesita una imagen, y la forma de esta herramienta es «elige un valor y mira el resultado»: meter un campo de subida la convierte en otra cosa. Y es más engorroso de lo que parece: hay que especificar el punto activo (qué punto de la imagen es la posición del ratón), hay límites de tamaño (los navegadores aceptan entre 32×32 y 128×128 e ignoran lo que los supere), la compatibilidad de `.cur` y `.png` es irregular, y si la carga falla se vuelve al puntero predeterminado en silencio, de modo que el usuario nunca se entera de que su imagen no cargó. Si lo haces, termina siempre con una palabra clave como respaldo.

¿Cuál uso, not-allowed o no-drop?

Depende de la situación. `not-allowed` significa «esta acción no está permitida», normalmente un estado deshabilitado; `no-drop` significa «aquí no se puede soltar», y se usa al arrastrar sobre un destino no válido. Los punteros son idénticos en muchos sistemas (un círculo con una barra) y la diferencia es semántica: en un contexto de arrastrar y soltar, el exacto es `no-drop`.