Question

我正在制作我的主页的页脚，其中包含我的三个配置文件的图标，我正在使用javascript片段来增加光标被带到它们时的图像大小，并在光标位于时减少它出。图像将水平显示，彼此相邻（内联块）。

虽然脚本运行正常，但我遇到了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。

Answer 2

为什么不选择基于CSS的纯清晰度解决方案，其效果优于基于JS的动画？您还可以通过更改片段中当前设置为500毫秒的转换持续时间来更改平滑过渡时间。

.icon{
display: inline-block;
position: relative;
width: 40px;
height: 40px;
}

.icon img{
height: 30px;
width: 30px;
max-width: 100%;
position: absolute;
padding: 5px;
transition:all linear 500ms;
}


.icon:hover img{
height:40px;
width:40px;
}

<footer>

      <div class="icon">
      <img id="0" src="https://i.imgur.com/e9l6jhU.png"/>
      </div>

      <div class="icon">
      <img id="1" src="https://i.imgur.com/RvAl3ob.png"/>
    </div>


    <div class="icon">
      <img id="2" src="https://i.imgur.com/vYUYQw9.png"/>
    </div>


</footer>

更改页脚图像大小会替换相邻图像

这是工作JSFiddle

2 个答案: