iOS Automatic Hover Fix

iOS automatic hover fix?

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>iPad Experiment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if(navigator.platform == "iPad") {
                $("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                    var onClick; // this will be a function
                    var firstClick = function() {
                        onClick = secondClick;
                        return false;
                    };
                    var secondClick = function() {
                        onClick = firstClick;
                        return true;
                    };
                    onClick = firstClick;
                    $(this).click(function() {
                        return onClick();
                    });
                });
            }
        });
    </script>
    <style type="text/css">
        a:hover {
            color:white;
            background:#FF00FF;
        }
    </style>
<body>
    <a href="http://google.ca">Google</a>
    <a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>

... or check out the demo on my web site. Note that it's set up to only work its magic on the iPad - detecting all versions of the iOS is another question in my books ;)

It works on the basis of the fact that...

After you click a link on the iphone or ipad, it leaves a simulated mouse hover that triggers the a:hover css styling on that link. If the link has a javascript handler that keeps you on same page, the hover state will not change until you click on another link.

Citation: Safari iphone/ipad “mouse hover” on new link after prior one is replaced with javascript

Fix CSS hover on iPhone/iPad/iPod

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

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>

Issue with ios hover event

I figured it out anyway using the example on iOS automatic hover fix? and changing:

if(navigator.platform == "iPad") {

to:

if ("ontouchstart" in document.documentElement) {

The final code:

$(document).ready(function() {
        if ("ontouchstart" in document.documentElement) {
            $("div").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                var onClick; // this will be a function
                var firstClick = function() {
                    onClick = secondClick;
                    return false;
                };
                var secondClick = function() {
                    onClick = firstClick;
                    return true;
                };
                onClick = firstClick;
                $(this).click(function() {
                    return onClick();
                });
            });
        }
    });

iOS 7 hover/click issue - no click triggered in some cases

Try this:

.wrapper {
    -webkit-overflow-scrolling: touch;
}

Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?

I found that ":hover" is unpredictable in iPhone/iPad Safari. Sometimes tap on element make that element ":hover", while sometimes it drifts to other elements.

For the time being, I just have a "no-touch" class at body.

<body class="yui3-skin-sam no-touch">
   ...
</body>

And have all CSS rules with ":hover" below ".no-touch":

.no-touch my:hover{
   color: red;
}

Somewhere in the page, I have javascript to remove no-touch class from body.

if ('ontouchstart' in document) {
    Y.one('body').removeClass('no-touch');
}

This doesn't look perfect, but it works anyway.

A click in iOS Safari triggers a hover state on element underneath where you tapped

If you have option to disable hover then you can do that with bit of hack.

First add this line in "DOMContentLoaded" event handler.

var canHover = !(matchMedia('(hover: none)').matches);
if (canHover) {
  document.body.classList.add('can-hover');
}

It will add .can-hover class to body of your html document.

Then just edit a:hover rule to match this instead

your css rule:

a:hover {
  color: red;
}

should be:

.can-hover a:hover {
  color: red;
}

this should prevent devices with touch screen to apply hover style to any anchor.

Safari iphone/ipad mouse hover on new link after prior one is replaced with javascript

The problem is that when you replace the content in place, Mobile Safari treats the new elements as if they were the old ones, because they occupy the same position in the DOM. One workaround is to remove the old elements first, then add the new elements asynchronously. The simplest way to do this is using setTimeout().

http://jsfiddle.net/chad/JNZvu/10/

// When we click on an answer
$('body').on('click', '.answer', function(){
  // don't follow it's link
  event.preventDefault();
   // fade out the container
  $('.container').fadeOut(function(){
    // remove old elements (happens after fadeOut because we are in the callback)
    $('.container').html('');
    // add new elements asynchronously and fade container back in.
    setTimeout( '$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0);
  });
});

When doing this for real, the fadeOut would be called at the same time as the AJAX function, and then the removal/addition would happen in the AJAX callback.

hover stats of hyperlinks don't disappear by tapping other places in iOS

below stack overflow link might be helpful

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

also useful resource

http://designshack.net/articles/css/are-hover-events-extinct/

also you might be looking for ios double tap issue

iOS automatic hover fix?

Hope this helps

iOS Automatic Hover Fix