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

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

Answer 2

您可以使用父级的相对位置和子元素的绝对位置：

＆＃13;

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

＆＃13;

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

＆＃13;

<html>
<head>
    <title></title>
</head>
<body>
<div id="parent" onmouseover="show()">
<div id="child">
Child div
</div>
</div>

</body>
</html>

＆＃13;

Answer 3

这是您所需要的http://jsfiddle.net/u74m4x9o/

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


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



#parent {
  background-color: orange;
  padding: 2em;
}
#child {
  background-color: pink;
  padding: 1em;
  display: none;
  position:absolute;
  top : 1em
}

显示隐藏的子div而不改变父div的大小

3 个答案: