How to show a text field upon hovering a button with just pure CSS?
<p>Is there a way to only use pure CSS code to show a text field when you hover a button?</p>

<pre><code>&lt;form id="demo"&gt;
    &lt;input type="text" id="search-field" name="s" placeholder="Search"&gt;
    &lt;input type="submit" id="search-icon"&gt;
    &lt;i class="fa fa-search"&gt;&lt;/i&gt;
&lt;/form&gt;
</code></pre>

<p>The text field should be hidden and only shows up when you hover the button. I'm not sure it can be done through CSS only. :/</p>