javascript - 更改页脚图像大小会取代相邻图像

Question

我正在制作主页的页脚，其中将包含我的三个个人资料的图标，并且我正在使用 javascript 代码段在光标放在图像上时增加图像的大小，并在光标放在图像上时减小图像的大小出去。图像将水平显示，并排显示(内联 block )。

虽然脚本工作正常，但我在 HTML 方面遇到问题:当我将鼠标悬停在行中的第一张图片上时，它的大小会增加，但其他图片会从它们的位置移位，即整行会被打乱.

我希望图像在发生鼠标事件时独立地改变它们的大小。

这是页脚代码:

<center><footer>

      <div style="display:inline-block; height:40px; width:40px;">
      <img style="vertical-align:center;" src="https://i.imgur.com/e9l6jhU.png"
          id="0" height="30" width="30" onmouseover="footerimg2(0)" 
          onmouseout="footerimg1(0)" ></img>
      </div>

    &nbsp;&nbsp;&nbsp;&nbsp;

      <div style="display:inline-block; height:40px; width:40px;">
      <img style="vertical-align:center;" src="https://i.imgur.com/RvAl3ob.png"
          id="1" height="30" width="30" onmouseover="footerimg2(1)" 
          onmouseout="footerimg1(1)" ></img>
    </div>

    &nbsp;&nbsp;&nbsp;&nbsp;

    <div style="display:inline-block; height:40px; width:40px;">
      <img style="vertical-align:center;" src="https://i.imgur.com/vYUYQw9.png"
          id="2" height="30" width="30" onmouseover="footerimg2(2)" 
          onmouseout="footerimg1(2)" ></img>
    </div>


</footer></center>

JavaScript，如果它是相关的:

<script>

    function footerimg2(id){
        var x = document.getElementById(id);
        x.width = 40;
        x.height = 40;
    }

    function footerimg1(id){
        var x = document.getElementById(id);
        x.width = 30;
        x.height = 30;
    }

</script>

这是工作 JSFiddle

如何在不移动其他图像的情况下独立调整图像大小？

Answer 1

尝试添加position:absolute;

img {
  position: absolute;
}

<div style="display:inline-block; height:40px; width:40px;">
  <img style="vertical-align:middle;" src="https://i.imgur.com/e9l6jhU.png" id="0" height="30" width="30" onmouseover="footerimg2(0)" onmouseout="footerimg1(0)" />
</div>

&nbsp;&nbsp;&nbsp;&nbsp;

<div style="display:inline-block; height:40px; width:40px;">
  <img style="vertical-align:middle;" src="https://i.imgur.com/RvAl3ob.png" id="1" height="30" width="30" onmouseover="footerimg2(1)" onmouseout="footerimg1(1)" />
</div>

&nbsp;&nbsp;&nbsp;&nbsp;

<div style="display:inline-block; height:40px; width:40px;">
  <img style="vertical-align:middle;" src="https://i.imgur.com/vYUYQw9.png" id="2" height="30" width="30" onmouseover="footerimg2(2)" onmouseout="footerimg1(2)" />
</div>

<script>
  function footerimg2(id) {
    var x = document.getElementById(id);
    x.width = 40;
    x.height = 40;
  }

  function footerimg1(id) {
    var x = document.getElementById(id);
    x.width = 30;
    x.height = 30;
  }
</script>

这是 Updated Fiddle .