Javascript CSS卡翻转问题

我的css卡翻转代码有一个奇怪的问题。直到我把鼠标从卡片上移开，卡片才会翻转。有人知道为什么会这样吗

提前谢谢

您有4种状态：

不翻转，不悬停（无css）

不是翻转，而是悬停

翻转，而不是悬停

翻转，盘旋

问题的原因是hover类正在重写flip类

第一个选择器更具体，并且会获胜

您可以通过为“翻转并悬停”状态添加更具体的选择器来修复此问题，如：

.flipped:hover {
    transform: rotateY(180deg);
}

或者您可以将州4排除在第一条规则之外：

.flipper:not(.flipped):hover {  
    transform: rotateY(-20deg);
}

---

请编辑您的问题，并在其中包含代码。另外，不要把整个代码都放进去，而是添加一个.来重新迭代@GalaxyCat105所说的内容。不要给我们整个网页进行调试。只有足够的代码来复制问题。没有人可以解释或修复他/她没有看到的代码。请务必附上您的相关代码。是的，这是固定的。非常感谢你的帮助。我很沮丧，无法正确地看到css。

.flipper:not(.flipped):hover {  
    transform: rotateY(-20deg);
}