悬停显示子元素，失去焦点时隐藏

Question

我有一个元素 (dropdown-content) 在其父元素 (Element2) 悬停时显示。当没有与元素 (dropdown-content) 发生交互时，我希望它像现在一样运行并在悬停结束时消失。但是当元素获得焦点时（单击下拉内容中的选择或输入或其他位置）我希望它保持显示直到它失去焦点（单击dropdown-content 之外的某处），即使当游标离开@987654324 @。 我已经尝试使用 CSS and/or javascript 通过搜索和几件事找到解决方案，但无法归档我想要的内容。这是一个示例代码来说明我的问题：

.dropdown-content {
  display: none;
  position: absolute;
  border: 1px solid black;
  width: 300px;
  z-index: 1;
}

.dropdown:hover .dropdown-content,
.dropdown-content:focus {
  display: inline-block;
}

<ul>
  <li>Element1</li>
  <li class="dropdown">
    <span>Element2</span>
    <div class="dropdown-content">
      <select>
        <option>option1</option>
        <option>option2</option>
      </select>
      <input type="text">
    </div>
  </li>
  <li>Element3</li>
</ul>

如果有一个干净的解决方案，我更喜欢 CSS 解决方案，但我也可以使用 javascript，但如果可能的话，我不想要 JQuery 解决方案。如果这使解决方案变得更容易，那么如果 dropdown-contet 仅在专注于选择和输入时保持显示也很好。

Answer 1

你不需要 Javascript 更不用说 jQuery 了。它可以和 should 使用纯 CSS 和伪类 :focus-within 来完成。

.dropdown-content {
  display: none;
  position: absolute;
  border: 1px solid black;
  margin: -3px 0 0 3px;
}

.dropdown:hover .dropdown-content, .dropdown-content:focus-within {
  display: inline-block;
}

<ul>
  <li>Element1</li>
  <li class="dropdown">
    <span>Element2</span>
    <div class="dropdown-content">
      <select>
        <option>option1</option>
        <option>option2</option>
      </select>
      <input type="text">
    </div>
  </li>
  <li>Element3</li>
</ul>