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

Question

我添加:hover with margin-top: -5px到div in *ngFor列表，它工作得很好，但是当我在每行的最后一个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)代替。

编辑:浏览器呈现转换而不影响布局