Menu
Does css hover work on mobile devices? I have a css hover class which works fine on a regular web browser, but doesn't work on mobile browsers.
311
Mobile devices use touch screen, which reacts only to touch, so there is no hover. Systems vary, on some a first touch is considered a hover and the second a click, but on many a touch is a click. You cannot rely on hover for mobile devices.
Add a secondary menu The first press simulates the hover of a mouse and the second press simulates the user taking the primary action. This is a neat alternative to hover effects but is constrained by screen size and limits the amount of information you can add to your effect.
The iPhone has a touch screen, so you can't really hover over anything, but the following technique will still work. Instead of hovering, you'll have to click on a given area for the controls to show up.
The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. Usually on mobile devices with a touch interface you don't have the former, only the latter. Also some pen interfaces only allow activating, not pointing.
The
:hoverpseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e. g., a pen device).—W3C: CSS 2.1: Selectors, dynamic pseudo-classes
So, to answer your question: It depends on the device but likely no. And don't rely on it. With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events.
72
Sigh. It seems like no-one answering this question actually tried it on a real device. In many cases it does work. The first click acts as a hover.
Some more info here: http://designshack.net/articles/css/are-hover-events-extinct/
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
