html - 包含带焦点输入的 div 的 CSS 选择器

Question

我在页面顶部有一个链接，当鼠标悬停在该链接上时，会显示一个搜索菜单。

#dropdown {
  display: none;
}

li:hover #dropdown {
  display: block;
}

<ul class="nav navbar-nav">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li>
    <a href="">Search</a>
    <div id="dropdown">
      <input name="txtSearch" type="text" id="txtSearch" class="form-control" />
      <input type="submit" name="btnSearch" value="Search" id="btnSearch" class="btn" />
    </div>
  </li>
</ul>

由于下拉列表中有一个文本框<div> , 如果用户在文本框中键入内容，我希望下拉列表即使在未悬停时也保持可见。

是否有纯 CSS 方法来做到这一点？

Answer 1

您可以添加 :focus-within pseudo-class任何父元素。

li:hover #dropdown,
li:focus-within #dropdown {
  display: block;
}

但是，请记住this is not supported in Microsoft browsers .为此，您需要一个基于 JavaScript 的解决方案。这是一个使用 jQuery 的:

$(document).on('focus','#txtSearch,#btnSearch',function(e) {
   $(this).closest('li').addClass('hover');
}).on('blur','#txtSearch,#btnSearch',function(e) {
   $(this).closest('li').removeClass('hover');
});

#dropdown {
  display: none;
}

li:hover #dropdown,
li.hover #dropdown {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li><a href="">Link 1</a></li>
  <li><a href="">Link 2</a></li>
  <li>
    <a href="">Search</a>
    <div id="dropdown">
      <input name="txtSearch" type="text" id="txtSearch" class="form-control" />
      <input type="submit" name="btnSearch" value="Search" id="btnSearch" class="btn" />
    </div>
  </li>
</ul>