EspañolES

Lista de cursores CSS – tipos de cursor

Pasa el cursor sobre una tarjeta para probarlo y haz clic para copiar el CSS.

Tus textos y archivos no salen de tu navegador: no se envía nada a ningún servidor.

Pasa el cursor sobre una tarjeta para verlo en acción. Haz clic para copiar la línea de CSS.

General

Enlaces y estado

Selección

Arrastrar y soltar

Redimensionar y desplazar

Zoom

Cómo se usa

  1. Pasa el cursor sobre cualquier tarjeta para verlo en acción. El aspecto cambia un poco según el sistema operativo y el navegador.
  2. Haz clic en una tarjeta para copiar “cursor: valor;” y pégalo en tu regla CSS.
  3. Escribe una palabra como resize o move en “Buscar” para filtrar la lista.
  4. Los teléfonos y las tabletas táctiles no muestran cursor, así que mira las vistas previas en un equipo de escritorio o un portátil.

Preguntas frecuentes

¿Puedo usar mi propia imagen como cursor?

Sí: cursor: url(cursor.png) 4 4, pointer; — los dos números fijan el punto activo (x y), y el valor estándar del final es obligatorio como alternativa por si la imagen no carga. Usa una imagen de 32×32 px o menos.

¿Cuándo uso pointer y cuándo default?

Usa pointer en lo que se puede pulsar, como enlaces y botones, y default en todo lo demás. Un pointer sobre algo que no responde al clic confunde a los usuarios.

¿Por qué grab no aparece en algunos navegadores?

Los navegadores muy antiguos necesitaban prefijos como -webkit-grab, pero las versiones actuales de Chrome, Edge, Firefox y Safari admiten los valores estándar grab y grabbing.

Herramientas relacionadas

Degradado CSSDegradados lineales, radiales y cónicosFiltros CSSDesenfoque, brillo, escala de grises y másSelector de colorHEX, RGB, HSL y CMYK en un solo lugarEditor HTMLEscribe HTML, CSS y JS y velo en vivo

Todas las herramientas