I have a button
<button class='btn-activa'>MOSTRAR DIV</button>
Which activates this hidden div
<div class='div-oculto' style='display: none; background: red; width: 400px; height: 400px;'>MOSTRANDO DIV</div>
In the css it is activated with focus and calling the class
<style>
/* al dar click al boton activa el div */
.btn-activar:focus + .div-oculto {
display: block !important;
}
</style>
What I want to achieve is that the :focus remains selected when clicking anywhere on the page since it is normally lost when clicking anywhere and the div with the information disappears, which I don't want.
How can I do it?
Try giving it focus, even if the entire document is clicked:
Hope this can help you
I don't know to what extent doing it with focus is essential, if you want a CSS-only solution, without JS, another thing you can do is put a hidden checkbox before
.div-oculto
, put a label pointing to that checkbox instead of the button and do#id_checkbox::checked + .div-oculto {
Edit to give an example