有什么办法可以在鼠标悬停在div上时显示div中的按钮，并在鼠标移出div时隐藏div中的按钮吗？

Question

我想问一下，当鼠标悬停在

div

上时，有没有办法“隐藏”

div

，同时显示

div

内的按钮，同时在没有按钮的情况下再次“显示”

div

当鼠标不在

div

上时？

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>

Answer 1

如果您的用例是在悬停期间使框变为白色（不可见），您可以这样做：

const a = document.getElementById("a");
const btns = document.querySelectorAll("#firstItem > .hoverable > button");

let btnsA = Array.from(btns);

a.addEventListener('mouseover', () => {
  btnsA.forEach((element) => {
element.style["display"] = "flex";
  });
});

a.addEventListener('mouseout', () => {
  btnsA.forEach((element) => {
element.style["display"] = "none";
  });
});

* {
  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: repeat(8, 1fr);
}

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

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

section #firstItem div:hover {
  color: #FFFFFF;
  background-color: #FFFFFF;
  
}

<section>
  <div id="firstItem">
<div id="a" class="hoverable">a</div>
<div id="b" class="hoverable">b</div>
<div id="c" class="hoverable">c</div>
<div id="d" class="hoverable">d</div>
<div id="e" class="hoverable">e</div>
<div id="f" class="hoverable">f</div>
<div id="g" class="hoverable">g</div>
<div id="h" class="hoverable">h</div>
  </div>
  <div id="frame"></div>
</section>