Fix CSS hover on iPhone/iPad/iPod

Question

I want to fix the hover effect on iOS ( change to touch event ) but I dont have any idea . Let me explain this . You have a text in your page :

<div class="mm">hello world</div> 

With style :

.mm { color:#000; padding:15px; } .mm:hover { background:#ddd; } 

Ok , in dekstop if you put your mouse over the text you get a #ddd background , right ? But in iOS if you touch the text you get nothing but if you tap it it gets a ugly and sticky #ddd background which is not nice and I want the user get the hover effect when he touch that text ( something like touchevent I think ) . But I see some websites fixed that like freemyappps.com or ( please check this site ->D4F on your ios device and touch something to see the hover effect like eating a cake :) ) But how these sites fixed that ? How can fix like them ? Thanks

Answer 1

Add onclick="" to anything you wish iOS to recognise as an element with a hover.

<div onclick="">Click Me!</div>