如何使悬停工作正确的移动

Question

我已经为即将推出的网站编写了很多代码，但我忘记了一件非常重要的事情。悬停效果在移动设备上无法正常工作。我知道当你点击它时，它会起作用，但这不是我想要的。我想要一个触摸开始和触摸结束的移动效果。有没有一个简单的JavaScript代码可以修复所有的悬停效果？因为这不仅仅是一个类的悬停效果，还有很多。就像按钮效果和当你悬停时会翻转的翻转卡。

这里有太多的代码要发布，但这里有一个到我的虚拟网站的链接。

有人能帮我解决问题吗？我知道这是一个基本的问题，但我在互联网上看到了很多不同的东西，我不知道该怎么办。我不能为每一个悬停效果写一个Javascript代码。我也不知道如何用媒体查询(悬停：悬停)或(悬停：无)来修复它，因为我想要触摸开始和触摸结束效果。

希望有人有时间帮助我，这对我来说意义重大。提前谢谢。

Answer 1

是，有一种解决方案可以使用JavaScript在移动设备上实现悬停效果的touchstart和touchend效果。您可以使用ontouchstart和ontouchend事件在移动设备上触发触摸效果。

const elements = document.querySelectorAll('.hover-effect');
elements.forEach((element) => {
// Add touchstart event listener
element.addEventListener('touchstart', () => {
element.classList.add('touch-hover-effect');
});
element.addEventListener('touchend', () => {
// Remove touch effect
element.classList.remove('touch-hover-effect');
});
});

当用户触摸该元素时，touchstart事件监听器会向该元素添加一个touch-hover-effect类，该类可用于使用CSS应用触摸效果。当用户释放触摸时，touchend事件监听器会从您使用touch-start添加的元素中删除touch-hover-effect类。

我希望这能有所帮助！

如需进一步参考：https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

可以看到效果：https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#result