html - div 中的 CSS 对象在悬停时移动

Question

我目前正在通过将社交媒体图标添加到他的网站来帮助他的 friend 。我想使用很酷的悬停效果，但是当我悬停图标时，它们会在 div 内移动。这并不奇怪，但除了调整填充使它们看起来像不动之外，我找不到任何其他方法。它看起来不太体面，有点作弊。

<script src="https://use.fontawesome.com/a63c918c5b.js" type="text/javascript">
</script>

<style media="screen" type="text/css">
  .icons {
    position: relative;
    padding: 9px;
  }
  .icons:hover {
    color: #4f5255;
    font-size: 19px;
    transition: font-size 0.2s;
    /*padding: 7px;*/
  }
  div {
    height: 100px;
    width: 200px;
    float: left;
  }
</style>

<div>
  <a target="_blank" href="link" class="icons fa fa-facebook" style="color: #4f5255;text-decoration:none;"></a>
  <a target="_blank" href="link" class="icons fa fa-twitter" style="color: #4f5255;text-decoration:none"></a>
  <a target="_blank" href="link" class="icons fa fa-instagram" style="color: #4f5255;text-decoration:none"></a>
</div>

我不希望将鼠标悬停在其中一个图标上时图标水平和垂直移动。我该如何解决？

Answer 1

不要改变字体大小。使用 scale()。这不会影响周围的元素。

如果您将 transition 移动到默认状态，而不是 :hover 状态，您将不会“快速”返回到默认大小。

<script src="https://use.fontawesome.com/a63c918c5b.js" type="text/javascript">
</script>

<style media="screen" type="text/css">
  .icons {
    position: relative;
    padding: 9px;
    transition: transform 0.2s;
  }
  .icons:hover {
    color: #4f5255;
    transform: scale(1.3);
  }
  div {
    height: 100px;
    width: 200px;
    float: left;
  }
</style>



<div>
  <a target="_blank" href="link" class="icons fa fa-facebook" style="color: #4f5255;text-decoration:none;"></a>
  <a target="_blank" href="link" class="icons fa fa-twitter" style="color: #4f5255;text-decoration:none"></a>
  <a target="_blank" href="link" class="icons fa fa-instagram" style="color: #4f5255;text-decoration:none"></a>
</div>