卡悬停时出现奇怪的故障

Question

我的问题是我使用了一些效果来使用 transform(translate) 和一些阴影使卡片浮动，它工作得很好，但是每当我靠近卡片宽度/高度末端的边缘时，它就会开始动画出现故障，我相信我知道为什么会发生这种情况，但我不太确定如何解决它.. 谢谢！

Answer 1

只是想提一下，这类问题的解决方案是用包装器包装浮动项目，并将悬停动作放在该包装器上而不是组件本身上。

例如：

.card:hover{
    box-shadow: -10px 0 10px 0;
    transform: translate(10px, 10px);
}

应该变成这样：

.card-wrapper:hover .card{
    box-shadow: -10px 0 10px 0;
    transform: translate(10px, 10px);
}