Mostrar los tags: focus-within

Código que muestra un menú emergente interactivo desplazandose hacia la derecha al obtener el foco, o al pasar el ratón por encima.

left: 100% Mueve el menú emergente el 100% del ancho de su padre desde la izquierda.
.reference: hover> .popout-menu Significa que cuando se coloca el cursor sobre .reference, seleccione los elementos secundarios inmediatos con la clase .popout-menu y cambie su visibilidad a visible, que muestra la ventana emergente.
.reference: focus> .popout-menu Significa que cuando .reference está enfocado, se mostrará la ventana emergente.
.reference: focus-within> .popout-menu Asegura que la ventana emergente se muestre cuando el foco está dentro de la referencia.

La pseudo clase focus-within aplica estilos a un elemento padre si algún elemento hijo obtiene el foco.
En este ejemplo se muestra el uso de focus-within en un formulario, cuando un elemento de entrada obtiene el foco dentro de un formulario.

Sin el foco


Con el foco