To simulate a hover with a touch in touch enabled browsers with CSS and JavaScript, we listen to the touchstart event.
For instance, we write
document.addEventListener("touchstart", () => {}, true);
to add a touchstart event listener to document.
Then we write
element:hover,
element:active {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}
to set the touch highlight color with -webkit-tap-highlight-color: rgba(0, 0, 0, 0);.
We disable context menu on long press with -webkit-touch-callout: none.
