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

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