javascript - CSS卡翻转问题

Question

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

提前致谢。

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

标签： javascripthtmlcssbootstrap-4

Answer 1

你有 4 个状态：

1. 不翻转，不悬停（无 css）
2. 未翻转，悬停
3. 翻转，不悬停
4. 翻转，悬停

您的问题的原因是您的悬停类通过更具体的方式覆盖了您的翻转类。

/* 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);
}