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

ipadiphonemobile-safaripseudo-class

I have some css menus on my site that expand with :hover (without js)

This works in a semi-broken way on iDevices, for example a tap will activate the :hover rule and expand the menu, but then tapping elsewhere doesn't remove the :hover. Also if there is a link inside the element that is :hover'ed, you have to tap twice to activate the link (first tap triggers :hover, second tap triggers link).

I've been able to make things work nicely on iphone by binding the touchstart event.

The problem is that sometimes mobile safari still chooses to trigger the :hover rule from the css instead of my touchstart events!

I know this is the problem because when I disable all the :hover rules manually in the css, mobile safari works great (but regular browsers obviously don't anymore).

Is there a way to dynamically "cancel" :hover rules for certain elements when the user is on mobile safari?

See and compare iOS behavior here: http://jsfiddle.net/74s35/3/
Note: that only some css properties trigger the two-click behavior, e.g. display:none; but not background: red; or text-decoration: underline;

Best Answer

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.

Related Topic