[英]click on mobile/tablet, hover on other devices (future-proofing)
需要一个主意,我陷入了一个难题。 我正在建立一个响应迅速的面向未来的网页设计。
在台式机和类似设备上:我有一个菜单,该菜单在悬停时执行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 */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.