Sometimes, we want to simulate a hover with a touch in touch enabled browsers.
In this article, we’ll look at how to simulate a hover with a touch in touch enabled browsers.
How to simulate a hover with a touch in touch enabled browsers?
To simulate a hover with a touch in touch enabled browsers, we listen for the touchstart event.
For instance, we write
document.addEventListener(
"touchstart",
() => {
//...
},
true
);
to listen to the touchstart event on document with addEventListener.
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 color on touch with -webkit-tap-highlight-color: rgba(0, 0, 0, 0);.
Conclusion
To simulate a hover with a touch in touch enabled browsers, we listen for the touchstart event.
