Question

我的目标是：

在用户点击按钮时显示popin
在用户点击其他地方时隐藏popin

我已经尝试过这个解决方案，效果很好：Use jQuery to hide a DIV when the user clicks outside of it

但我想尝试不同的方法，我想尝试focus()

所以我制作了这段代码：

＆＃13;

div
{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

div:focus
{
  background-color: red;
}

＆＃13;

<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

＆＃13;

它效果很好，现在我想要隐藏块并在用户点击按钮时显示它，我刚刚添加了display: block和display: none，这是唯一的区别两个版本

＆＃13;

div
{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  display: none;
}

div:focus
{
  background-color: red;
  display: block;
}

＆＃13;

<script>
function show()
{
	document.getElementById("element").focus();
}

</script>

<input type="button" onclick="show()" value="click me!"/>
<div id="element"tabindex="-1">

</div>

＆＃13;

它已经不能用了，有人可以告诉我为什么吗？

Answer 1

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

来自this question：

不可见的元素无法获得焦点，因此：focus psuedo-class无法应用。

Answer 2

您可以使用adjacent sibling selector使用CSS轻松完成此操作。当按钮聚焦时，会出现兄弟div：

＆＃13;

from pylatex import Document, Figure, StandAloneGraphic
from pylatex.base_classes.command import Options
from pylatex.utils import fix_filename

doc=Document()
doc.create(Figure(position='h!')) as fig:
    fig.append(
        StandAloneGraphic(
            image_options=Options('clip', width=50, trim='0 2cm 0 2cm'),
            filename=fix_filename('image.jpg')))

＆＃13;

div {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  display: none;
}

button:focus + div {
  background-color: red;
  display: block;
}

＆＃13;

使用焦点（）显示一个块

2 个答案: