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

Try this:

And in your CSS:

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none /*only to disable context menu on long press*/
}

With this code you don't need an extra .hover class!