CSS 内焦点和悬停不起作用

Question

我正在尝试在点击下方的搜索栏时显示搜索标签（文本输入字段上方的按钮）。我试图用 :hover :focus 和 :focus-within 来解决这个问题，但其中 none 似乎有效。我做错了什么？

代码如下：

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

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

CSS 内焦点和悬停不起作用

CSS focus-within and hover are not working

html

css

focus

hover

css-selectors