Cursores, selección y eventos del puntero en CSS

Las propiedades pequeñas que deciden cómo se siente una superficie bajo el mouse.

.button { cursor: pointer; }
.button:disabled { cursor: not-allowed; opacity: 0.6; }

.overlay-decoration {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.line-number { user-select: none; color: #94a3b8; }

::selection {
  background: #bfdbfe;
}

Cómo funciona

1. cursor nombra la forma; not-allowed es la honesta para un control deshabilitado.
2. pointer-events: none vuelve un elemento invisible para el mouse pero no para el ojo.
3. user-select: none evita que una etiqueta de UI se seleccione junto con el texto.

Palabras clave y builtins usados aquí

• background
• color
• cursor
• inset
• opacity
• position

El intento, en números

Líneas

14

Caracteres a escribir

252

Tokens

58

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 46 segundos.

Escribe este fragmento

Paso 3 de 3 en Estilo del contenido; paso 25 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →