Question

我有一个元素(dropdown-content)，当其父元素（Element2）悬停时显示。当没有与元素(dropdown-content)发生交互时，我希望它像现在一样起作用，并在悬停结束时消失。但是，当元素获得焦点（单击选择或输入或下拉菜单中的其他位置）时，我希望它保持显示状态，直到失去焦点（单击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仅停留在显示状态也可以。

Answer 1

您不需要Java脚本，更不用说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>

Answer 2

是的，您可以使用jQuery在悬停时显示和隐藏元素，如下所示：

$('.dropdown').hover(
  function () {
    $(this).find('.dropdown-content').show();
  }, 
  function () {
    $(this).find('.dropdown-content').hide();
  }
);

如果要显示和隐藏元素内部，请使用find()函数。

显示带有悬停的子元素，失去焦点时将其隐藏

2 个答案: