CSS 悬停是否影响兄弟元素？

Question

我创建了以下部分作为我当前正在处理的网站的一部分。

当光标悬停在职位名称下方的社交媒体图标上时，CSS 应该会在 div 中的图标周围生成一个边框，而不会影响其他任何内容整个部分。但是，在出现边框时，其他灰色框似乎对它们产生了 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/

CSS 悬停是否影响兄弟元素？

CSS hover is affecting sibling elements?

html

css

onhover