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状态，则您无法获得该状态＆＃34; snap＆＃34;回到默认大小。

＆＃13;

<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>

＆＃13;

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

1 个答案: