在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而不是display

Visibility将保持元件室。 display将删除空间

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

Answer 2

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

Answer 3

，你可以尝试这两种方法都根据自己的需要：

1，只有CSS

使用opacity。

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

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

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

 
.btn{ 
 
    opacity:0; 
 
}

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

1，CSS和jQuery

Uisng代码在你Q，只增加一类test-height

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

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

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

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

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

希望这helps.ty