当输入或div没有使用纯css聚焦时隐藏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; 
}

目前的行为:

• 当Focus开启时input,我可以看到div.
• 当焦点input消失时,我看不到div.
• 当我尝试点击时div,它会隐藏.

我不想要那种行为(当我试图点击时div,它会隐藏).

如果可能,我想要一个纯粹的CSS解决方案.

当我使用reactJS时,我不想使用jQuery.

Answer 1

div专注

div默认情况下,元素不可聚焦.如果你想强制它们可以聚焦添加tabindex="0"(参见MDN:tabindex)

如果您希望元素可以聚焦而不是通过键盘导航 - 那么添加 tabindex="-1"

既然div是可聚焦,我们可以使用的:focus-within伪类(caniuse)到被集中在容器专区内检查所有元素:

.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>