单击手机/平板电脑，将鼠标悬停在其他设备上（面向未来）

Question

需要一个想法，我陷入了一个难题。我正在构建一个响应式的未来证明网页设计。

在台式机和类似设备上：我有一个菜单，在悬停时会显示 CSS 动画来显示隐藏在链接后面的内容的描述，并在点击时导航到新页面。

在移动设备上：我希望有一个触发悬停的触摸事件（从而显示描述），然后在触摸 2 时它应该导航到新页面。

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

欢迎任何伟大的想法。 :)

Answer 1

使用 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 */
}