焦点不工作时从显示隐藏更改为显示块答案

【问题标题】：Changing from display hidden to display block when on focus not working焦点不工作时从显示隐藏更改为显示块
【发布时间】：2022-11-16 14:52:38
【问题描述】：

我试图在单击“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>

【问题讨论】：

标签： html css

【解决方案1】：

你应该使用 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>

【讨论】：

非常感谢，它工作得很好！我以前从未在这种情况下看到过“~”。