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专注

默认情况下，

div元素不可聚焦。如果您想强制它们具有焦点，请添加tabindex="0"（请参阅MDN: tabindex）

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

现在div可以关注，我们可以使用the :focus-within pseudo class（caniuse）来检查容器div中的所有元素：

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

现在我们还可以删除用于检查输入是否为焦点的CSS。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：如果浏览器兼容性存在问题（缺少对:focus-within的IE / Edge支持），您可以使用@Temani Afif的解决方案作为后备

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以在div上添加hover样式以使其显示，这样当您点击它时（当您将鼠标悬停在它上面时）即使您失去焦点也不会隐藏：

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

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

当输入或div没有使用纯css聚焦时隐藏div

2 个答案: