使用 focus() 显示块

Question

我的目标是：

• 当用户单击按钮时显示弹出窗口
• 当用户点击其他地方时隐藏弹出窗口

我已经尝试过这个解决方案，效果很好：当用户在 DIV 外部单击时，使用 jQuery 隐藏 DIV

但我想尝试一些不同的东西，我想尝试focus()

所以我编写了这段代码：

div
{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

div:focus
{
  background-color: red;
}

<script>
function show()
{
	document.getElementById("element").focus();
}

</script>

<input type="button" onclick="show()" value="click me!"/>
<div id="element"tabindex="-1">

</div>
After you clicked the button, click elsewhere to remove the red background

它工作得很好，现在我想隐藏该块并在用户单击按钮时显示它，我刚刚添加了display: block和display: none，这是两个版本之间的唯一区别

div
{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  display: none;
}

div:focus
{
  background-color: red;
  display: block;
}

<script>
function show()
{
	document.getElementById("element").focus();
}

</script>

<input type="button" onclick="show()" value="click me!"/>
<div id="element"tabindex="-1">

</div>

而且它不再起作用了，有人可以告诉我为什么吗？

Answer 1

您无法聚焦已应用的对象display: none。

从这个问题：

不可见的元素无法接收焦点，因此 :focus 伪类无法应用。