javascript - js flipcards 中的故障 - 翻转

Question

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

Answer 1

所以问题出现了，因为在悬停时，卡片会翻转。当卡片本身在翻转 Action 中减小其宽度时，将再次触发悬停并触发取消翻转。

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

更改您的 cardflip JavaScript，如下所示:

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