click on mobile/tablet, hover on other devices (future-proofing)

Question

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.

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.

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. :)

Answer 1

Use Javascript to add a class on the touchstart / touchend events. Browsers won't issue these events:

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