[英]click on mobile/tablet, hover on other devices (future-proofing)
need an idea, I am stuck in quite the conundrum. 需要一个主意,我陷入了一个难题。 I am building a responsive future proof webdesign.
我正在建立一个响应迅速的面向未来的网页设计。
On desktop and similar devices: I have a menu which on hover does a css animation to desplay a description of what hides behind the link and on click navigates to a new page. 在台式机和类似设备上:我有一个菜单,该菜单在悬停时执行css动画,以隐藏链接背后隐藏内容的描述,并在单击时导航到新页面。
On mobile devices: I wish to have a touch-event that triggers the hover (thus desplaying the description) and on touch number 2 it should then navigate to the new page. 在移动设备上:我希望有一个触发悬停的触摸事件(因此不显示描述),然后在触摸数字2上应导航到新页面。
the above is doable, but how to do it without checking user-agents, this is my situation. 以上是可行的,但是如何在不检查用户代理的情况下做到这一点,这是我的情况。 How does one go about future proofing the above.
如何对以上内容进行将来的证明。
Any great ideas are more then welcome. 任何更好的主意都将受到欢迎。 :)
:)
Use Javascript to add a class on the touchstart
/ touchend
events. 使用Javascript在
touchstart
/ touchend
事件上添加一个类。 Browsers won't issue these events: 浏览器不会发出以下事件:
Javascript: 使用Javascript:
document.querySelector("#myMenu").addEventListener("touchstart", function() {
this.classList.add("mobileHovered ");
});
document.querySelector("#myMenu").addEventListener("touchend", function() {
this.classList.remove("mobileHovered");
});
CSS: CSS:
#myMenu:hover,
#myMenu.mobileHovered {
/* CSS styles */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.