скрыть всплывающее окно при щелчке снаружи по CSS

Question

Последние пару лет я пытался решить свои проблемы наилучшим из возможных способов, и в настоящее время пытаюсь решать простые проблемы с помощью css только, если это возможно, например, показывать и скрывать div,

Проблемасейчас: показывает всплывающее окно при нажатии на кнопку и скрывает его при нажатии в любом другом месте, кроме всплывающего окна

Answer 1

5 минут назад я нашел решение, я видел решения с помощью флажков и псевдоселектора: check, но это не решило эту проблему,

и обнаружил, что: псевдоселектор focusрешено

CSS:

    #btn:focus + label{
        display:block;
    }
    label{
        display:none;
    }
    label:hover{
        display:block;
    }

HTML:

<input type="button" id="btn" value="submit">
<label for="btn">
    <div>
        Popup div
    </div>
</label>

помещение всплывающего окна в метку, чтобы при нажатии кнопки метка была видна, а кнопка -фокусируется, при нажатии в другом месте кнопка не сфокусирована, а метка скрыта