CSS悬停使其他元素移动

我想在hover上种植borders。但是，它确实会影响所有其他元素的定位

代码（）：

.nicePeopleItem{
显示：内联块；
}
.nicePeopleItem img{
边界半径：48px；
边框：4px实心#D568A8；
填充：2px；
过渡时间：0.3s；
光标：指针；
}
.nicePeopleItem img:悬停{
边框：10px实心#D568A8；
过渡时间：0.3s；
}

---

这是因为元素具有

显示：内联块

。这意味着默认情况下，所有图元都将与基线对齐，因此当一个图元变大时（由于边框变厚），它将向下推动其他图元

您可以添加

垂直对齐：顶部以使它们都与顶部对齐，而不是与基线对齐，这将防止其他元素被向下推。请注意，由于被悬停的元素的边界增加，因此被悬停的元素后面的元素仍将被向右推。（如果您希望避免这种情况发生，那么使用阴影而不是中提到的边框会更好。）


.nicePeopleItem{
显示：内联块；
}
.nicePeopleItem img{
边界半径：48px；
边框：4px实心#D568A8；
填充：2px；
过渡时间：0.3s；
光标：指针；
垂直对齐：顶部；
}
.nicePeopleItem img:悬停{
边框：10px实心#D568A8；
过渡时间：0.3s；
}
这是因为元素具有
显示：内联块
。这意味着默认情况下，所有图元都将与基线对齐，因此当一个图元变大时（由于边框变厚），它将向下推动其他图元

您可以添加
垂直对齐：顶部以使它们都与顶部对齐，而不是与基线对齐，这将防止其他元素被向下推。请注意，由于被悬停的元素的边界增加，因此被悬停的元素后面的元素仍将被向右推。（如果您希望避免这种情况发生，那么使用阴影而不是中提到的边框会更好。）


.nicePeopleItem{
显示：内联块；
}
.nicePeopleItem img{
边界半径：48px；
边框：4px实心#D568A8；
填充：2px；
过渡时间：0.3s；
光标：指针；
垂直对齐：顶部；
}
.nicePeopleItem img:悬停{
边框：10px实心#D568A8；
过渡时间：0.3s；
}
您可以将
边框
替换为
框阴影
，例如

border: 10px solid #D568A8;

应该成为

box-shadow:  0 0 0 10px #D568A8;

通过仅增加此属性，元素的计算宽度/高度将不会更改（因为没有几何体更改），因此这不会影响相邻静态图像的位置，这些图像将被
框阴影部分重叠


注意：如果您不希望在
悬停
状态下重叠，只需增加元素之间的边距。
您可以使用
框阴影替换
边框
，例如

border: 10px solid #D568A8;

应该成为

box-shadow:  0 0 0 10px #D568A8;

通过仅增加此属性，元素的计算宽度/高度将不会更改（因为没有几何体更改），因此这不会影响相邻静态图像的位置，这些图像将被
框阴影部分重叠


注意：如果您不希望在
悬停
状态下重叠，只需增加元素之间的边距。
您可以向悬停添加负边距，以补偿边框宽度的增长

只需加上：利润：-6px

.nicePeopleItem img:hover
{
  border: 10px solid #D568A8;
  transition-duration:0.3s;
  margin:-6px;
}


不过，它在过渡中发挥得不太好。如果没有过渡，这将非常有效
 您可以向悬停添加负边距，以补偿边框宽度的增长

只需加上：利润：-6px

.nicePeopleItem img:hover
{
  border: 10px solid #D568A8;
  transition-duration:0.3s;
  margin:-6px;
}


不过，它在过渡中发挥得不太好。如果没有过渡，这将非常有效
 我可以看到一个非常薄的白色圆圈之间的边界和阴影悬停。我们还可以在正常状态下将边框更改为方框阴影来删除它。当然，您可以在开始时添加额外的边距来补偿方框阴影的宽度。这将避免重叠：）当然，但对我来说，不清楚是否需要重叠，因为最初的问题是如何在不更改其他元素位置的情况下更改边框宽度。我将对它进行编辑，这很公平。我将在这里留下评论，以防OP不希望重叠，但可以添加额外的边距：）我可以在悬停时看到边框和阴影之间有一个非常薄的白色圆圈。我们还可以在正常状态下将边框更改为方框阴影来删除它。当然，您可以在开始时添加额外的边距来补偿方框阴影的宽度。这将避免重叠：）当然，但对我来说，不清楚是否需要重叠，因为最初的问题是如何在不更改其他元素位置的情况下更改边框宽度。我将对它进行编辑，这很公平。我会在那里留下评论，以防OP不希望重叠，但可以添加额外的边距：）这会使元素抖动！这使元素震动！