js翻盖卡片出现故障 - 翻转

Question

https://pretieyeinstitute.com.br/novo/有3张牌：Especialidades，Exames e Cirurgia。他们在鼠标悬停时出现轻微故障。有谁知道造成这种情况的原因是什么？

Answer 1

所以问题出现了，因为在悬停时，卡会翻转。当卡片本身在翻转动作时减小其宽度时，将再次触发悬停并触发解除撕裂。

解决方案是将悬停效果添加到卡的父级。然后悬停只会触发一次 - 当用户将卡片悬停在父元素上时。

更改您的cardflip JavaScript，因为以下应该可以解决这个问题：

$('.card').parent().hover(function(){
    console.log('noob');
  $(this).find('.card').toggleClass('flipped');
});