焦點不作業時從顯示隱藏更改為顯示塊

我試圖在單擊“searchbarinput”時顯示我的“searchbardropdown”，但這不起作用。有誰知道它有什么問題？謝謝！在圖片中，您可以看到當輸入處于焦點時背景顏色會發生變化，但下拉串列不會顯示。

CSS：

    display: none;
  }
  .searchbarinput:focus .searchbardropdown{
    display: block;
  }
  .searchbarinput:focus{
    background-color: red;
  }

HTML:

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

uj5u.com熱心網友回復：

你應該使用 tilt(~) 選擇器來選擇兄弟。

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

標籤：网页格式CSS

上一篇：如何有選擇地為其中一個子div添加填充而不影響另一個

下一篇：無法在div中垂直居中文本