html - 悬停效果使其他元素移动

谁能帮忙。
我有一只蝴蝶的图像，将其悬停时会弹出一点。我也有毛毛虫的形象。问题是当蝴蝶悬停在另一图像上时，它也在移动。我该如何阻止呢？

CSS是

/*Pink Butterfly - header*/
.pinkbutterfly  {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: relative;
    top:-30px;
    left:230px;
    }

.hoverimg:hover{
    width: 95px;
    height: 95px;
    position: relative;
    top:-30px;
    left:220px;
    }

/*Blue/Yellow Caterpillar - header*/
.blueyellowcaterpillar{
    width: 140px;
    height: 80px;
    overflow: hidden;
    position: relative;
    top:30px;
    left:550px
    }

HTML：

<div id="headercontent">
  <img src="nurserylogo.png" alt="Cassiltoun Stables Nursery Logo" class="nurserylogo">
  <img src="Edited Characters/pinkbutterfly.png" alt="pinkbutterfly" class="pinkbutterfly hoverimg">
  <img src="Edited Characters/blueyellowcaterpillar.png" alt="blueyellowcaterpillar" class="blueyellowcaterpillar choverimg">
  <p style="font-family:'FeltTip'">Tel: [phone]</p>
  <div id="navigation">
    <ul class="navlist">
      <li> about </li>
      <li> pictures </li>
      <li> find us </li>
      <li> contact</li>
    </ul>
  </div>
</div>

最佳答案

更改元素的大小会使布局重新排列。

要使其更大而不影响布局，请尝试

.hoverimg:hover {
    -webkit-transform: scale (1.2);
    transform: scale (1.2);
}

那应该使其更大，并使其保持在先前位置的中心。
如果这不是您想要的，请添加

    -webkit-transform-origin (top, center);
    transform-origin (top, center);

关于html - 悬停效果使其他元素移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17067510/