Disabling hover interactions on iOS

Bennett Wong
Feb 18, 2015 · 2 min read

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.

Image for post
Image for post

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";
}

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store