1

当单击它们下方的搜索栏时，我正在尝试显示搜索标签（文本输入字段上方的按钮）。我试图用 :hover :focus 和 :focus-within 解决这个问题，但它们似乎都不起作用。我究竟做错了什么？

这是代码：

.container {
   margin: 0 0;
   padding: 0 20px 0 20px;
   padding-top: 5vh;
   overflow: auto;
 }

 .up_buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   padding: 10px;
   grid-gap: 20px;
   visibility: hidden;
 }

 .dwn_buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   padding: 20px;
   grid-gap: 20px;
   visibility: hidden;
 }

 #bar:focus .dwn_buttons .up_buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   padding: 20px;
   grid-gap: 20px;
   visibility: visible;
 }
<div class="container">

    <div class="up_buttons">
      <div class="tp_btn">
        <input type="button" id="btn5" value=" food " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn6" value=" wtf do I know " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn7" value=" just an idea " />
      </div>
    </div>

    <div class="dwn_buttons">
      <div class="tp_btn">
        <input type="button" id="btn8" value=" social media content " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn9" value=" branding " />
      </div>
    </div>

    <div class="sbar" id="bar">
      <input type="text" placeholder=" What's in your head?">
    </div>
  </div>

4

1 回答 1

0

:focus-within和:hover或其他状态不适用于先前的兄弟选择器。相反，您可以使用根元素.container在您的案例中检查焦点。这样，您就可以更改根元素的所有子元素的样式.container。

.container {
   margin: 0 0;
   padding: 0 20px 0 20px;
   padding-top: 5vh;
   overflow: auto;
 }

 .up_buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   padding: 10px;
   grid-gap: 20px;
   visibility: hidden;
 }

 .dwn_buttons {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   justify-content: center;
   padding: 20px;
   grid-gap: 20px;
   visibility: hidden;
 }
 .container:focus-within .dwn_buttons,
 .container:focus-within .up_buttons{ 
   visibility: visible;
 } 
 .container:hover .dwn_buttons,
 .container:hover .up_buttons{ 
   visibility: visible;
 } 
<div class="container">

    <div class="up_buttons">
      <div class="tp_btn">
        <input type="button" id="btn5" value=" food " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn6" value=" wtf do I know " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn7" value=" just an idea " />
      </div>
    </div>

    <div class="dwn_buttons">
      <div class="tp_btn">
        <input type="button" id="btn8" value=" social media content " />
      </div>
      <div class="tp_btn">
        <input type="button" id="btn9" value=" branding " />
      </div>
    </div>

    <div class="sbar" id="bar">
      <input type="text" placeholder=" What's in your head?">
    </div>
  </div>

于 2021-11-22T03:35:21.200 回答