Disabling hover interactions on iOS

Hover interactions are incredibly useful for layering information in the DOM on desktop, but not so much on mobile, as there is essentially no way to ‘hover’ on a touch screen as… well… there is no cursor.

iOS Hover Behaviour

iOS interprets a users first tap on an element as a hover, if it exists on that element, and the second tap as a click. Consistency is usually key in UI, so if users expect their first tap on a mobile to behave like a click, essentially all hover interactions should be disabled for the mobile UI.

Modernizr

There are a few ways to do this, but the easiest method so far is using modernizr (which you should be using anyway). For those who haven’t used it before: Modernizr is a nifty front-end JS library which, summarily, detects what browser the user is using, what features are available in their browser, and makes those features targetable via classes appended to the broad <html> tag and also via Javascript.

CSS

What you want to do is limit your :hover functionality to desktop. More accurately, you’re limiting it to devices which have a cursor, i.e. without ‘touch’. The class in modernizr to use is .no-touch.

.no-touch .element:hover { 
/* your hover styles here */
}

JS

You can also target no-touch browsers in JS with modernizr using the following.

if (Modernizr.touch) { 
// Functions for touch screens (e.g. Mobile)
} else {
// Functions for no-touch screens (e.g. Desktop)
}

Without modernizr

The following bit of JS will also make the .no-touch class available, if that’s all you need.

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += "no-touch";
}
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.