How do I simulate a hover with a touch in touch enabled browsers?

Question

With some HTML like this:

Some Text

Then some CSS like this:

p {
  color:black;
}

p:hover {
  color:red         


        

Answer 1

Solved 2019 - Hover on Touch

It now seems best to avoid using hover altogether with ios or touch in general. The below code applies your css as long as touch is maintained, and without other ios flyouts. Do this;

1. Jquery add: $("p").on("touchstart", function(e) { $(this).focus(); e.preventDefault(); });

2. CSS: replace p:hover with p:focus, and add p:active

Options;

• replace jquery p selector with any class etc

• to have the effect remain, keep p:hover as well, and add body{cursor:ponter;} so a tap anywhere ends it

• try click & mouseover events as well as touchstart in same code (but not tested)

• remove e.preventDefault(); to enable users to utilise ios flyouts eg copy

Notes

• only tested for text elements, ios may treat inputs etc differently

• only tested on iphone XR ios 12.1.12, and ipad 3 ios 9.3.5, using Safari or Chrome.