css - 是否可以在纯 css 中创建一个使链接出现的按钮，直到我们单击它？

Question

我在提出问题时遇到了麻烦，很抱歉……我的问题是关于菜单的，为了上下文清晰

我尝试创建一个按钮或类似按钮，当您单击它（：focus 或可能：checked）时，会出现一个带有链接的下拉菜单，此链接是同一页面上的锚点#target，当您单击它时，下拉菜单消失，您被发送到目标

使用复选框，我可以使菜单出现，链接有效，但是单击链接时菜单不会消失（在我的情况下，这是一个问题，因为菜单就位：固定在整个屏幕上）

将焦点放在一个元素上，我可以使菜单出现，并在我单击它包含的链接时消失，但链接不起作用，好像它消失得太快而无法工作

我实际上可以通过可见性 + 过渡来做到这一点，但我觉得这是一个糟糕的 hack，因为我不擅长 css，必须有一个干净的方法，对吧？

#target  {
    margin-top: 500px;
}
#hided_button {
    visibility: hidden;
}
.show.normal:focus ~ #hided_button.normal,
.show.delayed:focus ~ #hided_button.delayed,
.show.check:checked ~ #hided_button.check {
    visibility: visible;
}
#hided_button.delayed {
    visibility: hidden;
    transition: all 1s;
}

<em>test with :focus on all kind of elements (it disappear well but link doesn't work) :</em>
<p class="show normal" tabindex="0">p_element</p>
<button class="show normal">button</button>
<a href="#" class="show normal">anchor</a>
<input type="button" id="input_button" class="show normal">
<label for="input_button">input</label>
<a id="hided_button" class="normal" href="#target">go_to</a>

<em><br>--------------<br>test with :focus and delay (it works) :</em>
<p class="show delayed" tabindex="0">p_element</p>
<button class="show delayed">button</button>
<a href="#" class="show delayed">anchor</a>
<input type="button" id="input_button2" class="show delayed">
<label for="input_button2">input</label>
<a id="hided_button" class="delayed" href="#target">go_to</a>

<em><br>--------------<br>test with :checked (link works but menu doesn't disapear) :</em>
<input type="checkbox" id="input_button3" class="show check">
<label for="input_button3">checkbox</label>
<a id="hided_button" class="check" href="#target">go_to</a>

<p id="target">target</p>

标签： cssbuttondrop-down-menuhyperlink