我试图找出是否有任何纯CSS 解决方案,以便在关注该元素的输入字段时保持下拉元素打开?这是一个例子:
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;
}

<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搜索输入元素进行关注?
答案 0 :(得分:1)
该解决方案已经提出,但缺乏浏览器支持:
9.4. The Generalized Input Focus Pseudo-class:
:focus-within
:focus-within
伪类适用于其中的元素:focus
伪类适用。如果其中一个元素,则元素也匹配
:focus-within
shadow-including descendants匹配:focus
。
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:
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;
答案 1 :(得分:1)
等待。实际上有一个纯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”。