Jak wyświetlić pole tekstowe po najechaniu na przycisk czystym CSS?

Question

Czy istnieje sposób używania tylko czystego kodu CSS do wyświetlania pola tekstowego po najechaniu na przycisk?

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

Pole tekstowe powinno być ukryte i wyświetla się tylko po najechaniu myszą na przycisk. Nie jestem pewien, czy można to zrobić tylko za pomocą CSS. :/

Answer 1

Spróbuj kod:

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

Updated

zamienić wejścia w HTML i zmienić swoje elementy, za pomocą właściwości order i zastosować display:flex; do kontenera w CSS. To by to rozwiązało.

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

Sprawdź: https://stackoverflow.com/a/36118012/5336321

Answer 2

Można zamienić kolejność input[type="text"] i input[type="submit"] a następnie można projektować input[type="text"] przy aktywowaniu przycisku, jak pokazano poniżej.

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