【问题标题】: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 个状态:

  1. 未翻转,未悬停(无 css)
  2. 不翻转,悬停
  3. 翻转,未悬停
  4. 翻转、悬停

问题的原因是悬停类覆盖了翻转类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。
猜你喜欢
  • 2015-02-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-21
  • 2015-06-05
  • 2020-07-04
  • 1970-01-01
相关资源
最近更新 更多