user2627442 user2627442 - 1 year ago 186
iOS Question

Fix CSS hover on iPhone/iPad/iPod

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 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 ?

Answer Source

Here is a basic, successful use of javascript hover on ios that I made.

All the code from the jsfiddle is below since you apperantly can't have a link to without code.

Note: I used jquery, which is hopefully ok for you.


  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
    //On Hover - Works on ios
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS


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


<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>