Html 将鼠标悬停在一张牌上时显示所有牌，并将牌堆叠在鼠标上

我正在尝试编写HTML和CSS（还没有JS），如果我将鼠标放在堆叠的卡片上，它们就会卷起显示所有卡片

初始状态：

所需状态：当鼠标悬停在任何卡上时，卡会堆叠在一起。

我创建了一个名为

stack

的CSS类。如果我将其附加到

卡

元素，例如：

它将显示所需的堆栈行为

如果我将悬停动作添加到卡中，动画会出现抖动，无法正常工作。例：

.card:hover {
  transform: translateY(calc((var(--y) * -105% + 50px)));
  box-shadow:none;
}

如何修复它，使其在卡上悬停时卷起卡，但当鼠标移出卡时，应再次显示堆叠视图

代码如下：

正文{
背景色：#e8eaed；
}
.卡片{
宽度：300px；
最小高度：150px；
背景色：白色；
位置：固定；
顶部：500px；
右：100px；
转换：翻译（-50%，-50%）；
显示：网格；
边界半径：5px；
字体系列：无衬线；
字体大小：14px；
颜色：#00000080；
盒影：0 5px 15px 0#000000 40，0 5px 5px 0#000000 20；
转换：转换200ms；
填充：15px；
}
.卡片{
转换：translateY（计算量（（var（--y）*20px）-50%）量表（计算量（1.0+var（--y）*0.05））；
}
.卡片化身{
显示：块；
}
.card avatar img{
宽度：40px；
高度：40px；
浮动：左；
}
.名片名称{
字体大小：16px；
显示：内联块；
边缘顶部：10px；
左边距：10px；
}
.卡头{
高度：30px；
显示：内联块；
}
.卡体{
利润上限：-30px；
}
.堆栈{
转换：translateY（计算（（var（--y）*-105%+200px））；
盒影：无；
}
.卡：悬停{
转换：translateY（计算（（var（--y）*-105%+50px））；
盒影：无；
}

公告1
这是公告1。
公告2
这是公告2。

最好将卡封装在一个div中，并在封装的div上执行悬停

.card stack

正文{
背景色：#e8eaed；
}
.卡片堆栈{
位置：固定；
最高：50%；
右：50%；
转换：翻译（-50%，-50%）；
}
.卡片{
宽度：300px；
最小高度：150px；
背景色：白色；
显示：网格；
边界半径：5px；
字体系列：无衬线；
字体大小：14px；
颜色：#00000080；
盒影：0 5px 15px 0#000000 40，0 5px 5px 0#000000 20；
转换：转换200ms；
填充：15px；
}
.卡片{
转换：translateY（计算量（（var（--y）*20px）-50%）量表（计算量（1.0+var（--y）*0.05））；
}
.卡片化身{
显示：块；
}
.card avatar img{
宽度：40px；
高度：40px；
浮动：左；
}
.名片名称{
字体大小：16px；
显示：内联块；
边缘顶部：10px；
左边距：10px；
}
.卡头{
高度：30px；
显示：内联块；
}
.卡体{
利润上限：-30px；
}
.堆栈{
转换：translateY（计算（（var（--y）*-105%+200px））；
盒影：无；
}
.card堆栈：悬停.card{
转换：translateY（计算（（var（--y）*-105%+50px））；
盒影：无；
}

公告1
这是公告1。
公告2
这是公告2。