How to simulate a hover with a touch in touch enabled browsers?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *