user2627442 user2627442 - 5 months ago 92
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 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

Here is a basic, successful use of javascript hover on ios that I made. http://jsfiddle.net/pizzaboy13/u7FL5/

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

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

Javascript:

$(document).ready(function(){
  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
  $(".mm").hover(function(){
    //On Hover - Works on ios
    $("p").hide();
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS
    $("p").show();
 })
});

CSS:

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

HTML:

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