Menús, tooltips y UI con :has, :focus-within, etc.

Crea menús desplegables, tooltips y componentes interactivos solo con CSS moderno, usando :has, :focus-within y selectores avanzados.

Menús, tooltips y UI solo con CSS

Hoy puedes crear menús desplegables, tooltips y otros componentes interactivos solo con CSS, gracias a selectores como :has y :focus-within.

Ejemplo de menú desplegable con :has

.menu:has(:hover) .submenu,
.menu:has(:focus-within) .submenu {
  display: block;
}
.submenu {
  display: none;
}

.tooltip-container:focus-within .tooltip {
  opacity: 1;
  pointer-events: auto;
}
.tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

Ventajas

Sin JS, solo CSS
Accesible y fácil de mantener

Explora estos patrones y adáptalos a tus necesidades de UI moderna.