CSS 悬停使其他元素移动

Question

我想在悬停时增加边框。然而，它确实会影响所有其他元素的定位。

代码（https://jsfiddle.net/s2m3vtbb/）：

.nicePeopleItem  {
  display:inline-block;
}
.nicePeopleItem img{
  border-radius:48px;
  border: 4px solid #D568A8;
  padding: 2px;	
  transition-duration:0.3s;	
  cursor:pointer;
}
.nicePeopleItem img:hover{
  border: 10px solid #D568A8;
  transition-duration:0.3s;
}

<div class="carrousel">
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>  
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>  
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>  
  <div class="nicePeopleItem">
    <img src="http://placehold.it/48x48">
  </div>
</div>

我尝试添加一些边距、填充和一些绝对定位，但没有成功。

Answer 1

你可以border用 a替换box-shadow，例如

border: 10px solid #D568A8;

应该成为

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

通过只增加这个属性，元素的计算宽度/高度不会改变（因为没有几何变化）所以这不会影响相邻静态图像的位置，这些图像将被box-shadow.

代码笔演示

注意：如果您不想在hover状态重叠，只需增加元素之间的边距。