javascript - 单击手机/平板电脑，将鼠标悬停在其他设备上(面向 future )

需要一个想法，我陷入了一个难题。我正在建立一个响应迅速的面向未来的网页设计。

在台式机和类似设备上：我有一个菜单，该菜单在悬停时执行css动画，以隐藏链接背后隐藏内容的描述，并在单击时导航到新页面。

在移动设备上：我希望有一个触发悬停的触摸事件（因此不显示描述），然后在触摸数字2上应导航到新页面。

以上是可行的，但是如何在不检查用户代理的情况下做到这一点，这是我的情况。如何对以上内容进行将来的证明。

任何更好的主意都将受到欢迎。 :)

最佳答案

使用Javascript在touchstart / touchend事件上添加一个类。浏览器不会发出以下事件：

Javascript：

document.querySelector("#myMenu").addEventListener("touchstart", function() {
    this.classList.add("mobileHovered ");
});
document.querySelector("#myMenu").addEventListener("touchend", function() {
    this.classList.remove("mobileHovered");
});

CSS：

#myMenu:hover,
#myMenu.mobileHovered {
    /* CSS styles */
}