在不改变父 div 大小的情况下显示隐藏的子 div

Question

我有以下代码：

function show() {
  document.getElementById("child").style.display = "block";
}

#parent {
  background-color: orange;
  padding: 2em;
}
#child {
  background-color: pink;
  padding: 3em;
  display: none;
}

<div id="parent" onmouseover="show()">
  <div id="child">
    Child div
  </div>
</div>

当我将鼠标悬停在父 div 上时，父 div 的大小会发生变化。有没有办法在父div上方显示子div，而不改变父div的大小？

Answer 1

您可以使用

visibility:hidden

代替

display:none

显示/隐藏内容并保持大小不变​​。需要相应地更改脚本。