如何使用纯CSS在悬停按钮时显示文本字段？
如何使用纯CSS在悬停按钮时显示文本字段？
提问于 2016-09-01 13:16:15
当你悬停按钮时，有没有办法只使用纯CSS代码来显示文本字段？
<form id="demo">
<input type="text" id="search-field" name="s" placeholder="Search">
<input type="submit" id="search-icon">
<i class="fa fa-search"></i>
</form>文本字段应处于隐藏状态，仅当您悬停按钮时才会显示。我不确定只通过CSS就能做到。:/
回答 2
Stack Overflow用户
发布于 2016-09-01 13:23:11
尝试以下代码：
#search-field {
display: none;
}
#btn:hover + #search-field {
display: inline-block;
}<form id="demo">
<input type="button" value="Hover" id="btn" />
<input type="text" id="search-field" name="s" placeholder="Search" />
<input type="submit" id="search-icon" />
<i class="fa fa-search"></i>
</form>
已更新
在超文本标记语言中交换输入，使用order属性重新排列元素，并将display:flex;应用于CSS中的容器。这样就可以解决问题了。
#search-field {
visibility: hidden;
}
#search-icon:hover + #search-field {
visibility: visible;
}
#demo {
display: flex;
}
input:nth-child(2) {
order: -1;
}<form id="demo">
<input type="submit" id="search-icon" />
<input type="text" id="search-field" name="s" placeholder="Search" />
<i class="fa fa-search"></i>
</form>
Stack Overflow用户
发布于 2016-09-01 13:58:34
您可以交换input[type="text"]和input[type="submit"]的顺序，然后可以在按钮悬停时设置input[type="text"]样式，如下所示。
#demo {
position: relative;
padding-top: 30px;
}
#search-field {
transition: opacity 0.25s linear;
position: absolute;
opacity: 0;
left: 0;
top: 0;
}
#search-icon:hover + #search-field {
opacity: 1;
}<form id="demo">
<input type="submit" id="search-icon" />
<input type="text" id="search-field" name="s" placeholder="Search" />
<i class="fa fa-search"></i>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39263163
复制相关文章
相似问题
腾讯云开发者
