javascript - 在不改变父 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之上？

Answer 1

你可以使用

visibility:hidden

代替

display:none

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