CSS focus-within and hover are not working

Question

I'm trying to display the search tags (the buttons above the text input field) when the search bar under them is clicked. I've tried to solve the problem with :hover :focus and :focus-within, but none of them seems to work. What am I doing wrong?

Here's the code:

.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 and :hover or other state not worked for previous sibling selector. Instead you can use root element to check in focus-within the .container in your case. That way you can change style of all child element of the root element, .container in your case.

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