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的那个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在此处使用focus-within伪类。

Info from MDN

Supported browsers

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: