包含带焦点输入的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伪类添加到任何父元素。

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

但是，请记住，Microsoft浏览器不支持此功能。您将需要一个基于JavaScript的解决方案。这是使用jQuery的一种：

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

$(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;
}