按钮悬停时，稳定页面的其余部分

Question

当我将鼠标悬停在我的按钮上时，尺寸会发生变化，这就是我想要的。

但是，下面的所有内容都会被旧按钮大小和新大小之间的差异量提升。

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

非常感谢你！

Answer 1

一种选择是在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>