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

Question

我有一个元素 (dropdown-content)，当其父元素 (Element2) 悬停时会显示该元素。当没有与元素 (dropdown-content) 发生交互时，我希望它像现在一样运行，并在悬停结束时消失。但是当元素获得焦点时（单击 select 或输入或下拉内容中的其他地方）我希望它保持显示直到它失去焦点（单击 dropdown-content 之外的某个地方），即使游轮离开 dropdown-content。我已经尝试使用 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 在焦点集中在 select 且仅输入时保持显示也很好。

Answer 1

你不需要 Javascript 更不用说 jQuery 了。它可以 be done with pure CSS with the pseudo-class :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>

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

Display child-element with hover, hide it when focus is lost

html

javascript

css

focus

drop-down-menu