CSS悬停影响兄弟元素？

Question

我创建了以下部分，作为我目前正在开发的网站的一部分。

当将光标悬停在职位下方的社交媒体图标上时，CSS 应该在图标周围单独生成一个边框，而不会影响整个部分的任何其他内容。然而，在边框出现后，其他灰色框似乎对它们产生了类似margin-top 的效果。

这就是上一段中描述的内容：

我想要达到的效果与后一张照片中看到的效果相同，只是没有将其他 div 向下推。这种效果在某种程度上看起来确实不错，但我想知道是什么原因造成的，以及如何避免它。

这是其中一个盒子的结构，例如：

<div class="container">
  <div class="row">

    <div class="col-span-3 crew-member">
      <img src="imgs/avatar1.jpg" alt="" class="img-circle">
      <div class="name">John Blue</div>
      <div class="job-title">Web & Graphics Designer</div>
      <div class="social-icons">
        <i class="fa fa-facebook-official"></i>
        <i class="fa fa-twitter-square"></i>
        <i class="fa fa-instagram"></i>
      </div>
    </div>

  </div>
</div>

根据要求，这是一个有悬停问题的 JSFIDDLE： https://jsfiddle.net/c9zwecha/

任何帮助将不胜感激。

Answer 1

您的问题是每个 crew-member 都显示为inline-block。然后，当您将图标悬停并增加其大小时，完整内容的行高会增加，并且其他成员向下滑动。

为了防止这种情况，您需要像这样将每个成员对齐到顶部。

.who .crew-container .crew-member {
    vertical-align: top;
}

这里是更新的 jsfiddle：https://jsfiddle.net/jormaechea/c9zwecha/1/