让我的悬停查询脚本脚本在移动设备上工作

Question

我目前在我的网站上工作，并使用以下代码在悬停时翻转卡片。但是，我在移动设备上进行了测试，然后卡片在触摸时翻转，但只有在我点击另一张卡片时才会翻转。有谁知道如何或我是否可以调整此代码（或者我可以使用不同的代码？）来使这项工作在移动设备上运行。谢谢！

$('.card').hover(function() { $(this).toggleClass('flipped'); });

Answer 1

hover()接受在您悬停时运行的第二个（可选）参数

$('.card').hover(function() {
    $(this).toggleClass('flipped');
  },
  function() {
    $(this).toggleClass('flipped');
});

但是在移动设备上hover()不是真正的jquery移动事件，它在内部使用touch个事件，因此如果它不起作用，您可能需要使用touchstart和{{1事件并绑定它们

编辑：touchend类似于点击，touchstart类似于移动设备上的mouseup事件。如果你包含jquery mobile，你可以这样做

Snip 1

touchend

这就像是一个“切换按钮”，当你触摸并释放它时会保持其状态，直到你再次这样做。这就是

Snip 2

$(".card").on('touchstart',function() {
     $(this).toggleClass('flipped');
});

当你松开触摸它会恢复到原始状态时，

会表现得像一个“涡轮按钮”