CSS cursor: todos los valores, cursores personalizados y opacidad
Galería de cursores CSS
CSS cursor: todos los valores, cursores personalizados y opacidad | We.Inc
Pasa el ratón sobre una casilla para cada uno de los 36 valores estándar de cursor en CSS, crea un cursor de imagen personalizado con hotspot y respaldo, y aprende cuándo atenuar con opacity, visibility o rgba.
La propiedad cursor define el puntero del ratón que se muestra sobre un elemento, por ejemplo cursor: pointer para lo que se puede pulsar, not-allowed para controles desactivados y grab para elementos que se pueden arrastrar. Los cursores personalizados usan url() con una imagen, coordenadas opcionales del hotspot y una palabra clave de respaldo obligatoria. Pasa el ratón por cada casilla de abajo para ver los 36 valores estándar en tu navegador.
Los cursores que más vas a usar
Estado
CSS
Tailwind
Enlace o botón
cursor: pointer
Control desactivado
cursor: not-allowed
Se puede arrastrar / arrastrando
cursor: grab / grabbing
cursor-grab / cursor-grabbing
Texto editable
cursor: text
Redimensionar una columna
cursor: col-resize
Ocupado pero utilizable
cursor: progress
Es fácil equivocarse con los nombres de los cursores, y cada sistema operativo los dibuja de forma un poco distinta. Esta galería te deja pasar el ratón por cada palabra clave en tu propio navegador, luego muestra cómo crear un cursor de imagen personalizado que siga teniendo un buen respaldo, junto con los trucos de opacidad correspondientes para estados atenuados y desactivados.
Pasa el ratón por cualquier casilla de la galería para ver ese cursor tal como lo dibuja tu sistema. Haz clic en una casilla para copiar su declaración.
Usa el filtro para limitar la lista a cursores de enlaces, redimensionado, arrastre o estado.
Abre el creador de cursores personalizados, ajusta el hotspot y prueba el resultado en la zona de prueba.
Lee la sección de opacidad para elegir entre opacity, visibility y colores rgba para los fundidos.
Los navegadores ya muestran pointer en los enlaces. Añádelo tú a los botones y otros elementos clicables, porque los botones usan la flecha por defecto.
Mantén las imágenes de cursor personalizadas en 32 por 32 píxeles o menos. Algunos navegadores y sistemas operativos pueden ignorar las imágenes más grandes.
Termina siempre una lista de cursores con una palabra clave como auto o pointer. La palabra clave es obligatoria después de los valores url().
Las pantallas táctiles no tienen cursor, así que nunca uses el cursor como única señal de que algo es interactivo.
Preguntas frecuentes
¿Cómo creo un cursor personalizado en CSS?
Escribe cursor: url(cursor.svg) 4 4, auto; donde la imagen es un archivo PNG, SVG o CUR pequeño, los dos números son el hotspot en píxeles desde la esquina superior izquierda, y auto es la palabra clave de respaldo que se usa si la imagen falla. Puedes indicar varias imágenes url() antes de la palabra clave.
¿Qué cursor debe mostrar un botón desactivado?
not-allowed es la opción habitual. Aplícalo con button:disabled { cursor: not-allowed; opacity: 0.5; } y conserva el atributo disabled real, para que los usuarios de teclado y de lectores de pantalla también sepan que el control no está disponible, no solo los usuarios de ratón.
¿Cuál es la diferencia entre opacity y visibility?
opacity atenúa todo el elemento, incluidos sus hijos, y un elemento totalmente transparente sigue recibiendo clics y foco. visibility: hidden desactiva el elemento tanto para el puntero como para las tecnologías de asistencia, pero conserva su espacio. Usa opacity para el fundido en sí y cambia visibility al final para que los elementos invisibles no se puedan pulsar.
¿Por qué opacity también vuelve transparente mi texto?
opacity se aplica a todo lo que hay dentro del elemento. Para que solo el fondo sea translúcido, usa un color translúcido: background-color: rgb(0 0 0 / 0.5), o el antiguo rgba(0, 0, 0, 0.5). El texto se mantiene totalmente opaco.
¿Puedo ocultar el cursor?
cursor: none lo oculta sobre el elemento, algo que a veces necesitan los juegos, los quioscos y los reproductores de vídeo. Úsalo con moderación en sitios web normales, porque la gente pierde de vista hacia dónde apunta.
Los cursores son pistas, no controles
El cursor indica a los usuarios de ratón qué pasará antes de hacer clic. Un pointer promete un objetivo clicable, un cursor de texto promete texto seleccionable o editable, y una flecha de redimensionar promete que se puede arrastrar. Mostrar un pointer sobre algo que no hace nada es una promesa rota.
Los usuarios de teclado, pantallas táctiles y lectores de pantalla nunca ven estas pistas. Los elementos interactivos deben seguir pareciendo interactivos, tener un estilo de foco visible y usar botones y enlaces reales para que se anuncie su función.
Cursores de imagen personalizados que no fallan
Una imagen de cursor se descarga como cualquier otra imagen, así que una descarga lenta o fallida deja en su lugar la palabra clave de respaldo. Un SVG en línea con data: evita la petición por completo y se ve nítido en pantallas de alta densidad.
El hotspot es el píxel exacto que hace clic. En una flecha es la punta, normalmente cerca de 0 0; en una cruz o un círculo es el centro. Un hotspot mal colocado hace que los clics caigan unos píxeles lejos de donde la gente apunta.
Atenuar elementos correctamente
Para un aspecto desactivado, combina una opacidad de alrededor de 0.5 con cursor: not-allowed y el atributo disabled. Comprueba que el texto atenuado siga cumpliendo los requisitos de contraste si la gente necesita leerlo.
Para revelar elementos al pasar el ratón, anima opacity porque es barato de renderizar, y combínalo con visibility para que el elemento no se pueda pulsar mientras es transparente. Un color con canal alfa es la herramienta adecuada cuando solo una capa, como un fondo o un borde, debe ser translúcida.
Los 36 valores de cursor
Palabras clave estándar de cursor (CSS Basic User Interface Level 4); las clases de Tailwind son cursor-<value>
Valor
Grupo
Significado
General
El navegador decide según el contexto
General
La flecha de la plataforma
General
No se dibuja ningún cursor
Enlaces y estado
Hay un menú contextual disponible
Enlaces y estado
Hay ayuda disponible
Enlaces y estado
Un enlace o control clicable
Enlaces y estado
Ocupado, pero aún puedes interactuar
Enlaces y estado
Ocupado, todavía no puedes interactuar
Selección
Se pueden seleccionar una o varias celdas de tabla
Selección
Selección bidimensional precisa
Selección
El texto se puede seleccionar o editar
Selección
Se puede seleccionar texto vertical
Arrastrar y soltar
Se creará un acceso directo o alias
Arrastrar y soltar
Se copiará algo
Arrastrar y soltar
Se moverá algo
Arrastrar y soltar
No se puede soltar aquí
Arrastrar y soltar
La acción no está permitida
Arrastrar y soltar
Se puede agarrar y arrastrar
Arrastrar y soltar
Se está arrastrando
Redimensionar y desplazar
Se puede desplazar en cualquier dirección
Redimensionar y desplazar
Redimensionar una columna en horizontal
Redimensionar y desplazar
Redimensionar una fila en vertical
Redimensionar y desplazar
Mover el borde superior
Redimensionar y desplazar
Mover el borde derecho
Redimensionar y desplazar
Mover el borde inferior
Redimensionar y desplazar
Mover el borde izquierdo
Redimensionar y desplazar
Mover la esquina superior derecha
Redimensionar y desplazar
Mover la esquina superior izquierda
Redimensionar y desplazar
Mover la esquina inferior derecha
Redimensionar y desplazar
Mover la esquina inferior izquierda
Redimensionar y desplazar
Redimensionar hacia la izquierda o la derecha
Redimensionar y desplazar
Redimensionar hacia arriba o hacia abajo
Redimensionar y desplazar
Redimensionar en la diagonal ascendente
Redimensionar y desplazar
Redimensionar en la diagonal descendente
Zoom
Se puede ampliar
Zoom
Se puede reducir
Cursor personalizado con hotspot y respaldo
Cursor de anillo en SVG en línea centrado en su hotspot
El hotspot 12 12 sitúa el clic en el centro del anillo. Se usa crosshair si la imagen no se acepta.
Estados desactivado, arrastre y redimensionado
Cursores que coinciden con la interacción
Pasa el ratón por cada elemento. La tarjeta arrastrable cambia a grabbing mientras mantienes pulsado el botón del ratón.
opacity vs visibility vs rgba
Cómo elegir la forma de atenuar
Técnica
¿Afecta a los hijos?
¿Sigue siendo clicable?
¿Se anima con suavidad?
Tailwind
opacity: 0.5
Sí, a todo lo que contiene
Sí
Sí
visibility: hidden
Sí (los hijos pueden volver a mostrarse)
No
Cambia al instante
background: rgb(0 0 0 / 0.5)
No, solo a esa capa
Sí
Sí
bg-black/50
color: rgb(17 17 17 / 0.6)
No, solo al texto
Sí
Sí
text-black/60
Opacidad de todo el elemento junto a un fondo translúcido
El banner de la izquierda atenúa su texto junto con la caja. El de la derecha mantiene el texto nítido sobre un fondo translúcido.
El navegador decide según el contexto
La flecha de la plataforma
No se dibuja ningún cursor
Hay un menú contextual disponible
Hay ayuda disponible
Un enlace o control clicable
Ocupado, pero aún puedes interactuar
Ocupado, todavía no puedes interactuar
Se pueden seleccionar una o varias celdas de tabla