Heim  >  Fragen und Antworten  >  Hauptteil

Der Wechsel von „Ausgeblendet anzeigen“ zu „Block anzeigen, wenn der Fokus nicht funktioniert“ funktioniert

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粉301523298P粉301523298220 Tage vor455

Antworte allen(1)Ich werde antworten

  • P粉898049562

    P粉8980495622024-04-05 00:37:46

    您应该使用倾斜(~)选择器来选择同级。

  • StornierenAntwort