Does css hover work on mobile devices?

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.

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.

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/

What does the questioner mean by "Does css hover work on mobile devices?"?

He obviously doesn't mean it literally, because there is no such thing as hover on mobile devices so it cannot work.

If he means "On mobile devices if I tap on an object with a hover style does anything happen?" the answer is Yes, but what happens varies with the device/browser.

Specifically on iPhone/Safari and Android the response is as if you have written an OnClick() event handler with the style change in it, and this persists until you tap on another object. On Windows phone the style change occurs while your finger is pressed down on the phone and then reverts when you release it.

You can check your device at the test site I set up at davidleader.net/mobiledemo.html.

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

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.

From my own experience, it works fine on my iphone4, whatever is the browser (safari or chrome), but does not works properly on my nexus10 with chrome...

I used :hover to implement menu. When I say "it works", I mean that the first touch behaves like an hover on a desktop, and a second touch will behaves like a click. When I say "it does not work", I mean that a touch behaves like a click directly...

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.

won't do its magic on touchscreen devices, but it does work on mobiles where the user navigates by using some arrow keys (or on amazon kindle)

also works for blackberry storm 1 devices as they have touch, and click events due to their suedo-tactile screens.

:hover works with the android default browser, but it is really tricky (for the user) to trigger the hover without triggering a click at the same time.

Yes, it has. if you don't believe, try it. i) Write Hover Css on Codepen or other stack which you had Account. ii) Save your work. [it easy to see if you add 'border-bottom: 1px dotted black'] iii) Open it on your Mobile, Tablet or whatever you want to prove. [which your pen save, mind is CodePen]

As result, you'll get the answer. Don't believe the theory much, just practice and prove it.