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

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来控制元素的可见性。它隐藏了元素，但在页面中保留了框架模型的占用区域。

＆＃13;

＆＃13;

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

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

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

.btn{
  visibility:hidden;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用visibility代替display

Visibility将保留元素空间。 display将删除空格

＆＃13;

＆＃13;

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

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

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

.btn{
  visibility:hidden;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以根据需要尝试这两种方法：

1，仅限CSS

使用opacity。

＆＃13;

＆＃13;

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

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

#wrapper:hover .btn{
  opacity:1;
}

.btn{
  opacity:0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

1，CSS和JQUERY

使用Q中的代码，只添加了一个类test-height

＆＃13;

＆＃13;

var firstHeight = $('.test-height').height();
$('.test-height').height(firstHeight);
$('.btn').hide();

＆＃13;

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

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

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
content
</div>
<div class="test-height">
<button class="btn">
Button 1
</button>
<button class="btn">
Button 2
</button>
<button class="btn">
Button 3
</button>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。