Question

我试图找出是否有任何纯CSS 解决方案，以便在关注该元素的输入字段时保持下拉元素打开？这是一个例子：

＆＃13;

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
}

div:hover form {
  display: block;
}

form {
  display: none;
  padding: 0 15px;
}

＆＃13;

<div>Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>

＆＃13;

我们的想法是在搜索字段聚焦时保持表单可见。因为当用户开始键入搜索查询并且鼠标移出悬停区域时，表单会隐藏，并且非常烦人。

提问题：每次<div>悬停时，是否可以通过CSS搜索输入元素进行关注？

Answer 1

该解决方案已经提出，但缺乏浏览器支持：

9.4. The Generalized Input Focus Pseudo-class: :focus-within

:focus-within 伪类适用于其中的元素   :focus伪类适用。

如果其中一个元素，则元素也匹配:focus-within   shadow-including descendants匹配:focus。

＆＃13;

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
}
div:hover form, div:focus-within form {
  display: block;
}
form {
  display: none;
  padding: 0 15px;
}

＆＃13;

<div tabindex="-1">Hover Me
  <form class="search">
    <input type="search" placeholder="What are you looking for?" autofocus>
    <input type="button" value="Search!">
  </form>
</div>

＆＃13;

同时，您可以使用polyfill：

＆＃13;

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
}
div:hover form, div.focus-within form {
  display: block;
}
form {
  display: none;
  padding: 0 15px;
}

＆＃13;

<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div tabindex="-1">Hover Me
  <form class="search">
    <input type="search" placeholder="What are you looking for?" autofocus>
    <input type="button" value="Search!">
  </form>
</div>

＆＃13;

Answer 2

等待。实际上有一个纯CSS解决方案。但是有一个缺点 - 它仅适用于一个var data = [40,50,60,70,80] var days = ["Mon","Tue","Wed","Thu","Fri"] var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickFormat(function (d,i) { return days[i]; });标记，而且没有<input>标记，如下所示：

<form>

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
  padding: 0.5%;
}
input {
  display: none;
  margin: auto;
}
div:hover input {
  display: block;
}
input:focus {
  display: block !important
}

但是，您可以通过按键盘上的Enter键让用户搜索表单。不幸的是，这需要JavaScript，这违背了这篇文章的全部目的。

我还注意到您的占位符文本无法正常工作，因为“搜索”文本仍然存在。有两种解决方案 - 使用JavaScript来修复它，或者将输入标记的“类型”更改为“text”。

CSS解决方案使下拉元素在聚焦时可见

2 个答案: