CSS卡翻转问题

【问题标题】：Issue with CSS Card FlipCSS卡翻转问题
【发布时间】：2020-09-02 08:32:20
【问题描述】：

我的 css 卡翻转代码有一个奇怪的问题。在我将鼠标从卡片上移开之前，卡片不会翻转。有谁知道为什么会发生这种情况？

提前致谢。

http://www.whitehotstaging.com/cb/

【问题讨论】：

请编辑您的问题并在其中包含代码。另外，不要放置整个代码，而是添加Minimal Reproducible Example。
重申@GalaxyCat105 所说的话。不要给我们一个完整的网页来调试。足以复制问题的代码。
没有人可以解释或修复他/她没有看到的代码。请务必附上您的相关代码。

标签： javascript html css bootstrap-4

【解决方案1】：

你有 4 个状态：

未翻转，未悬停（无 css）
不翻转，悬停
翻转，未悬停
翻转、悬停

问题的原因是悬停类覆盖了翻转类by being more specific。

/* this covers state 2 & 4, and wins both */
.flipper:hover {  
    transform: rotateY(-20deg);
}

/* this covers state 3 & 4, but loses 4 to the rule above */
.flipped {
    transform: rotateY(180deg);
}

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

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

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

或者您可以从第一条规则中排除状态 4：

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

【讨论】：

是的，已经解决了。非常感谢你的帮助。我很沮丧，我无法正确看到 css。