Is there any way to show the buttons in a div during mouseover a div, and hide the buttons in a div during mouseout a div?

I’d like to ask is there a way to “hide” a div while showing the button inside a div when the mouse is over the div, while “showing” the div again without the buttons when the mouse is not over the div?

Update: I’d clarify again more precisely what effect I want to achieve. When I move my mouse over the div, I want the text “a” to be hidden, showing up all the buttons and the text of the button inside the div, while turning the background color into light blue, and the text color into black. When I move away my mouse from the div, I want all the buttons and the text of the buttons in the div to be hidden, showing up again the text “a” only, while turning the bg color into black, and the text color into white.

const a = document.getElementById("a");
let btns = document.getElementsByTagName("#firstItem > .a > button");
let btnsA = Array.from(btns);

a.addEventListener('mouseover', () => {

  btnsA.forEach((element) => {
    element.style["display"] = "flex";
  });
  
  a.style["color"] = "#56F1FF";
});

a.addEventListener('mouseout', () => {

  btnsA.forEach((element) => {
    element.style["display"] = "none";
  });
  
  a.style["color"] = "#FFFFFF";
});

* {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

section {
  display: flex;
}

#firstItem {
  width: 10%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}

#frame {
  width: 90%;
  height: 100%;
}

section #firstItem div {
  color: #FFFFFF;
  background-color: #000000;
  border: 0;
  text-align: center;
}

section #firstItem div:hover {
  color: #000000;
  background-color: #56F1FF;
}

section #firstItem #a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

section #firstItem #a button {
  display: none;
  background-color: #56F1FF;
  color: #000000;
}

<section>
  <div id="firstItem">
    <div id="a">a
      <button>a1</button>
      <button>a2</button>
      <button>a3</button>
      <button>a4</button>
      <button>a5</button>
      <button>a6</button>
    </div>
    <div class="b">b</div>
    <div class="b">c</div>
    <div class="b">d</div>
    <div class="b">e</div>
    <div class="b">f</div>
    <div class="b">g</div>
    <div class="b">h</div>
  </div>
  <div id="frame">
  </div>
</section>