悬停时div中的CSS对象移动

Question

我目前正在通过向他的网站添加社交媒体图标来帮助朋友。我想使用很酷的悬停效果，但是当我悬停图标时，它们会在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>