使 div 在隐藏 DOM 中的元素时保持其大小

Question

我已经动态创建了div。对于一些测试，我选择 30 个 div。

每个 div 底部都有一个按钮栏。我只想在悬停 div 容器时显示此栏。

当隐藏这些元素时，div 会变小/缩小。我想保持更大的尺寸，因此仅隐藏按钮，但容器保持其尺寸。

离开 div 时，只有按钮应该消失。

#wrapper{
  padding: 50px;
  background-color: red;
}

#content{
  color: white;
  padding: 10px;
  font-size: 20px;
}

#wrapper:hover .btn{
  display:block;
}

.btn{
  display:none;
}

<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>

Answer 1

用于visibility控制元素的可见性。它隐藏了元素，但保留了它们占用的区域，从而维护了页面中的盒模型。

#wrapper{
  padding: 50px;
  background-color: red;
}

#content{
  color: white;
  padding: 10px;
  font-size: 20px;
}

#wrapper:hover .btn{
  visibility:visible;
}

.btn{
  visibility:hidden;
}

<div id="wrapper">
<div id="content">
content
</div>
<div>
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>