按钮悬停时，稳定页面的其余部分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了按钮悬停时，稳定页面的其余部分相关的知识，希望对你有一定的参考价值。
当我将鼠标悬停在我的按钮上时，尺寸会发生变化，这就是我想要的。
但是，下面的所有内容都会被旧按钮大小和新大小之间的差异量提升。
<div id="container">
<!-- Main Content -->
<div id="upper_logo" ><img src="gallery/logo_small.png"/></div>
<div id="slogan" ><p style="color: #ffffff; font-size: 50px; text-align: center">BLA BLUB BLA LEL BUL BLUE LOUB</p></div>
<div id="play_button"><a target="_blank" href="https://SITE/google_advice/"><img src="gallery/google_play_button_small.png"></a></div>
<div style="display: table; margin: auto;">
<div class="button_box"><a id="buttons" target="_blank" href="LINK" ><img src="gallery/youtube_icon_smal.png"></a></div>
<div class="button_box"><a id="buttons" target="_blank" href="LINK"><img src="gallery/different_twitter_icon_small.png"></a></div>
<div class="button_box"><a id="buttons" target="_blank" href="LINK" ><img src="gallery/discord_icon_small.png"></a></div>
</div>
<!-- Description margin: auto 500px auto; -->
<div style="text-align: left; margin: auto; width: 500px">
<h1 style="font-size: 48px;">BLA LA BLA</h1>
<h2 style="font-size: 24px">TEXT BLA BLA TEXT TEXT BLA BLA TEXT 2</h2>
<h3 style="font-size: 22px">TEXT BLA BLA TEXT TEXT BLA BLA TEXT 2</h3>
<p style="font-size: 22px">TEXT BLA BLA TEXT TEXT BLA BLA TEXT 3</p>
<p> </p>
<h3 style="font-size: 22px">END TEXT</h3>
</div>
</div> 非常感谢你！
答案
一种选择是在CSS中制作按钮position: absolute。这样，它不会改变任何其他元素的位置。唯一的缺点是你必须为它下面的任何元素设置自定义位置。
.hover_button{
background-color: yellow;
padding: 15px;
position: absolute;
}
.hover_button:hover{
padding: 25px;
}
.below_button{
margin-top: 90px;
}<h1> hello this is a h1 </h1>
<button class="hover_button">When you hover on me, I will grow!</button>
<h2 class="below_button"> hello this is a h2 </h2>以上是关于按钮悬停时，稳定页面的其余部分的主要内容，如果未能解决你的问题，请参考以下文章