如何仅使用纯 CSS 在悬停按钮时显示文本字段？答案

【问题标题】：How to show a text field upon hovering a button with just pure CSS?如何仅使用纯 CSS 在悬停按钮时显示文本字段？
【发布时间】：2016-09-19 21:19:30
【问题描述】：

有没有办法只使用纯 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 来完成。：/

【问题讨论】：

您希望在悬停时显示哪个字段？
这看起来像是一场可用性噩梦。在提供的答案中，您甚至无法单击文本字段（尽管您可以使用标签）。所有这些赞成票来自哪里？

标签： html css forms button hover

【解决方案1】：

试试这个代码：

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

更新

在 HTML 中交换您的输入并使用 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>

检查：https://stackoverflow.com/a/36118012/5336321

【讨论】：

它适用于新输入。但是，#btn:hover + #search-field{ visibility:visible;} 可以使用“提交”输入类型吗？
在 css 中没有选择器来执行此操作，但您可以使用 flex 并反转顺序 jsfiddle.net/b7snbomk 或使用 JS 或 jQuery 来执行此操作
@user12109321358 你可以把submit按钮放在input之前
刚刚放弃了我的代码笔......大约 30 行代码并到达那里......你像 8 一样完成......哈哈干得好
很好，但为什么你使用input:nth-child(2) 而不仅仅是#search-field。我不明白那部分。

【解决方案2】：

您可以交换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>

【讨论】：