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

Question

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.

Leave a Comment Cancel reply