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.


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. …


Bennett Wong