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

Question

需要一个想法，我陷入了相当大的难题。我正在构建一个响应式的面向 future 的网页设计。

在台式机和类似设备上:我有一个菜单，悬停时它会执行一个 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 */
}