当他的孩子通过键盘导航聚焦时如何显示元素？

Question

我试图改善网站的可访问性，但只有在自身或上一个元素被聚焦/悬停时才显示div的问题。

此div中有一个输入，我希望可以通过键盘导航对其进行访问，但是当焦点位于输入上时， 它不认为div是这样。

所以我想问我如何检测焦点何时放在此输入上并保持显示父div？

我已经尝试过使用CSS，但是我们不能选择父级（除了：had，但尚未实现）。

我也在搜索使用JavaScript和jQuery的解决方案，但我不知道如何实现。

.b {
  display: none;
}

.a:hover+.b,
.a:focus+.b,
.b:hover,
.b:focus {
  display: block;
}

<button class="a">A button that displays the div</button>
<div class="b">
  <input type="checkbox">
</div>

实际上，当您将按钮聚焦时div会出现，但是当您使用制表进行输入时，div会消失。我希望它在输入集中时保持显示状态。

如果您单击该按钮，它将起作用，仅当您不使用鼠标时问题才会发生。

编辑：我发现：focus-within，但是它是not implemented on all browser。

Answer 1

所以您的问题是，当您单击复选框时，即选中复选框时，应该选中display: block直到选中它。当您再次取消选中它时，它应该像在按钮焦点display: block上一样起作用，否则display: none是否正确？