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

Question

当你悬停按钮时,有没有办法只使用纯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完成.:/

Answer 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