Question

我希望在悬停时增加边框。但它确实影响了所有其他元素的定位。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 1

这是因为元素有display: inline-block。这意味着默认情况下所有元素都将与基线对齐，因此当一个元素变大时（由于边框较粗），它会向下推动其他元素。

您可以将vertical-align: top;添加到元素中，使它们全部与顶部而不是基线对齐，这样可以防止其他元素被按下。请注意，正在悬停的元素之后的元素仍将被推向右侧，因为正在悬停的元素的边界增加。（如果你想避免这种情况发生，那么使用阴影代替fcalderan's answer中提到的边框会更好。）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将border替换为box-shadow，例如

border: 10px solid #D568A8;

应该成为

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

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

Codepen Demo

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

Answer 3

您可以为悬停添加负边距以补偿边框宽度增长。

添加：margin：-6px;

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

Fiddle

尽管如此，它并没有很好地发挥作用。没有过渡，这完美地运作。

CSS悬停使其他元素移动

3 个答案: