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

我需要一个主意，我被困在这个难题中。我正在构建一个响应性强、经得起未来考验的网站设计

在桌面和类似的设备上：我有一个菜单，在悬停时做一个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");
});

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

CSS:

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

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

---

您可以只测试宽度。如果小于600，则将a

isMobile

设置为true，并使用该变量测试屏幕宽度。但是为什么没有用户代理呢？您是否在前端公开敏感数据？你为什么在意呢？嗅嗅一下用户代理，然后继续下一个项目。遗憾的是，除非是纯html，否则没有真正的未来证明。即使这样，检查用户代理在未来也会是一个问题，原因很明显，因此我希望避免使用它，检查屏幕也是一个问题，因为有太多尺寸怪异的触摸设备。我想如果我能检查一下它是否是触控设备，我会解决我的问题。对不起，但从用户体验的角度来看，这是一个可怕的想法。用户不必多次触碰链接才能浏览到新页面。你是否同意我的用户体验决策并不是真正的问题，也几乎不相关：）完美而简单的解决方案，现在我为什么不想到这个呢？：）thx分配：）