通过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>

将弹出窗口放入标签中 因此，当按下按钮时，标签可见且按钮处于焦点状态；在其他任何地方单击时，按钮均未聚焦并且标签被隐藏