1

Tengo un botón

<button class='btn-activa'>MOSTRAR DIV</button> 

Que activa este div oculto

<div class='div-oculto' style='display: none; background: red; width: 400px; height: 400px;'>MOSTRANDO DIV</div>

En el css se activa con focus y llamando la clase

<style>
/* al dar click al boton activa el div */
.btn-activar:focus + .div-oculto {
display: block !important;
}
</style>

Lo que quiero lograr es que el :focus siga seleccionado al dar click en cualquier parte de la página ya que normalmente se pierde cuando se da click en cualquier lado y pues desaparece el div con la información, cosa que no quiero.

Cómo puedo hacerlo?

2 respuestas 2

2

No sé hasta que punto hacerlo con focus es imprescindible, si quieres una solucion solo CSS, sin JS, otra cosa que puedes hacer es poner un checkbox oculto antes de .div-oculto, pones un label apuntando a ese checkbox en vez del boton y haces #id_checkbox::checked + .div-oculto {

Edito para poner un ejemplo

.btn-activar {
  display: inline-block;
  background: #bbb;
  padding: .5em;
}

.div-oculto {
  display: none;
  background: red;
  width: 400px;
  height: 400px;
}

#check {
  display: none;
}

#check:checked+.div-oculto {
  display: block;
}
<label for="check" class='btn-activar'>MOSTRAR DIV</label> Que activa este div oculto

<input type="checkbox" id="check">
<div class='div-oculto'>MOSTRANDO DIV</div>

2

Prueba darle focus, aunque se le haga click al documento entero:

document.addEventListener("click", function(){
   document.getElementsByClassName("btn-activa")[0].focus();
});

Espero que te sirva

1
  • 1
    Pues es esto o revisar si el div con la info está visible y detener la propagación del evento (para evitar que cambie el foco)
    – Alfabravo
    Commented el 24 ene. 2019 a las 10:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.