CSS悬停正在影响兄弟元素？

Question

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

当使用光标悬停在作业标题下方的社交媒体图标时，CSS应该单独围绕图标生成边框，而不会影响整个部分的任何其他内容。但是，在出现边框时，其他灰色框似乎对它们产生margin-top类效果。

这是前一段中描述的内容：

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

非常感谢任何帮助。

Answer 1

您的问题是每个工作人员都显示为height = int(input("What is your height: ")) for row in range(height): print(('{:>'+str(height)+'}').format('*'*(row+1))) 。然后，当您将图标悬停并增加其大小时，完整内容的行高会增加，其他成员会向下滑动。

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

inline-block

以下是更新的jsfiddle：https://jsfiddle.net/jormaechea/c9zwecha/1/