用悬停显示子元素，当焦点丢失时将其隐藏

Question

我有一个元素(dropdown-content)，它在其父元素(Element2(悬停时显示。当没有与元素(dropdown-content)发生交互时，我希望它像现在一样工作，并在悬停结束时消失。但是，当元素获得焦点时(点击选择或输入或下拉内容中的其他地方(，我希望它保持显示，直到它失去焦点(点击dropdown-content之外的某个地方(，即使管理员离开dropdown-content。我已经尝试过使用CSSand/orjavascript找到一个搜索和一些事情的解决方案，但无法归档我想要的内容。下面是一个示例代码来说明我的问题：

.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了。它可以而且应该使用具有伪类:focus-within的纯CSS来完成。

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