Heim > Fragen und Antworten > Hauptteil
Ich versuche, mein „Suchleisten-Dropdown“ anzuzeigen, wenn auf „Suchleisteneingabe“ geklickt wird, aber das funktioniert nicht. Weiß jemand, was los ist? Danke! Im Bild können Sie sehen, dass sich die Hintergrundfarbe ändert, wenn die Eingabe den Fokus erhält, das Dropdown-Menü jedoch nicht angezeigt wird.
.searchbardropdown{ display: none; } .searchbarinput:focus .searchbardropdown{ display: block; } .searchbarinput:focus{ background-color: red; }
<div class="searchbarcontainer"> <script src="searchbar.js"></script> <div class="searchbar"> </div><input class="searchbarinput" id="searchbarinput" type="text" placeholder="Pesquisar.."><button class="serchbarbutton" type="submit"><i class="material-symbols-outlined searchbarbuttonicon">search</i></button> <div class="searchbardropdown"> <a class="dropdowna" href="#">// Trocar Variaveis<br></a> <a class="dropdowna" href="#trocarvariaveis">// Celsius para Farenheit<br></a> <a class="dropdowna" href="#celsiusparafarenheit">// Farenheit para Celsius<br></a> <a class="dropdowna" href="#farenheitparacelsius">// Area Circulo<br></a> <a class="dropdowna" href="#areacirculo">// Par ou Impar<br></a> <a class="dropdowna" href="#parouimpar">// Intervalo entre numeros<br></a> <a class="dropdowna" href="#intervalo">// Intervalo entre maior e menor de vetor<br></a> <a class="dropdowna" href="#intervalovetor">// Maior e menor numero<br></a> <a class="dropdowna" href="#maiormenor">// Paisagem ou retrato<br></a> <a class="dropdowna" href="#paisagemouretrato">// Fizz ou Buzz<br></a> <a class="dropdowna" href="#fizzbuzz">// String do objeto<br></a> <a class="dropdowna" href="#stringobject">// Par ou impar ate limite<br></a> </div> </div>
P粉8980495622024-04-05 00:37:46
您应该使用倾斜(~)选择器来选择同级。
.searchbardropdown{ display: none; } .searchbarinput:focus ~ .searchbardropdown{ display: block; } .searchbarinput:focus{ background-color: red; }