每行的最后一个元素在悬停时将下一行的第一个元素推向右侧

Question

我将 :hover with margin-top: -5px 添加到 *ngFor 列表中的 div 中，它工作正常，但是当我将鼠标悬停在每一行的最后一个 div 上时，这会使下一行的第一个 div 向下推其他div 而第一个 div 移动到悬停的 div 下方的最右侧。

所有的 div 都有相同的高度，我该如何解决它，以便最后一个 div 悬停在一行上不会影响另一行上的 div？

这是我的示例代码：

.divcard {
  width: 24%;
  margin-left: 0.8%;
  height: 420px;
  float: left;
  background-color: rgb(246, 246, 246);
  transition: ease 0.5s;
}

.divcard:hover {
  margin-top: -5px;
}

<div *ngFor="let del of item">
  <div class="divcard">
    <img class="cover" [src]="del.myimg" />
  </div>
</div>

Answer 1

margin 创建空间，你可以使用transform: translateY(-5px) 代替。

编辑：浏览器渲染变换而不影响布局