CSS focus-within 和 hover 不起作用答案

【问题标题】：CSS focus-within and hover are not workingCSS focus-within 和 hover 不起作用
【发布时间】：2021-12-31 17:39:52
【问题描述】：

当点击下方的搜索栏时，我正在尝试显示搜索标签（文本输入字段上方的按钮）。我试图用 :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>

【问题讨论】：

标签： html css hover focus focus-within

【解决方案1】：

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

【讨论】：