html - 使用纯 css 在输入或 div 未聚焦时隐藏 div

Question

我只想在以下情况下显示一个 div:

• 重点输入。
• div 是重点。

这是我的 HTML:

<div>
    <input type="text" />
    <div>
        ...some content
    </div>
</div>

这是我的 CSS:

input + div {
    background: #f0a;
    display: none;
    height: 200px;
    width: 200px;
    overflow-x: auto; 
    overflow-y: scroll;
}

input:focus + div { 
    display: block; 
}

当前行为:

• 当焦点位于 input 上时，我可以看到 div。
• 当 input 的焦点消失时，我看不到 div。
• 当我尝试点击 div 时，它隐藏了。

我不想要这种行为(当我尝试点击 div 时，它会隐藏)。

如果可能，我想要一个纯 css 解决方案。

因为我正在使用 reactJS，所以我不想使用 jQuery。

Answer 1

div is focused

div 元素默认是不可聚焦的。如果你想强制它们成为焦点，请添加 tabindex="0"(参见 MDN: tabindex)

如果您希望元素可聚焦但不是通过键盘导航 - 然后添加 tabindex="-1"

现在 div 是可聚焦的，我们可以使用 the :focus-within pseudo class ( caniuse ) 来检查容器 div 中任何被聚焦的元素:

.wpr:focus-within div {
  display: block;
}

现在我们还可以删除检查输入是否聚焦的 CSS。

input + div {
    background: #f0a;
    display: none;
    height: 200px;
    width: 200px;
    overflow-x: auto; 
    overflow-y: scroll;
}


.wpr:focus-within div {
  display: block;
}

<div class="wpr">
    <input type="text" />
    <div tabindex="-1">
        ...some content
    </div>
</div>

注意:如果浏览器兼容性有问题(IE/Edge 不支持 :focus-within)，您可以使用@Temani Afif 的解决方案作为后备方案

input+div {
  background: #f0a;
  display: none;
  height: 200px;
  width: 200px;
  overflow-x: auto;
  overflow-y: scroll;
}

.wpr:focus-within div {
  display: block;
}

input:focus + div {
  display: block;
}

.wpr div:hover {
  display: block;
}

<div class="wpr">
  <input type="text" />
  <div tabindex="-1">
    ...some content
  </div>
</div>