Does css hover work on mobile devices?

Question

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.

Any help is appreciated.

Sam

Answer 1

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 :hover pseudo-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.

Answer 2

It depends upon the browser used in the mobile device. Refer to Quirks Mode for mobile devices and see if your browser / platform will implement it.

Answer 3

I would say no, as you do not hover in a mobile interface. You can just press, if on touch screen. Otherwise you just move through links.

Answer 4

Not unless the device can detect when someone is hovering their finger over the screen, about to tap. :)