74

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.

whostolemyhat
  • 3,107
  • 4
  • 34
  • 50
Sam
  • 1,045
  • 2
  • 9
  • 8

11 Answers11

43

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.

Community
  • 1
  • 1
Joey
  • 344,408
  • 85
  • 689
  • 683
  • 3
    Maybe new technology will bring point-only events back. See [this](http://www.mobilemag.com/2010/04/22/cypress-truetouch-adds-hover-functions-to-touchscreens/) and [this](http://www.webia.info/articles/usability/the-change-is-here-hover-events-come-to-mobile-devices/) links, for example. – Sony Santos Oct 07 '11 at 05:57
  • I know Wacom was working on that, but do you really expect those to gain widespread usage in the foreseeable future? – Joey Oct 07 '11 at 07:04
  • 1
    Yes! Did you expect touchscreen mobile phones (or any other current technology) would gain widespread usage so fast? :) – Sony Santos Oct 07 '11 at 15:05
  • 2
    So fast? Most of the original research (also regarding gestures) happened in the 80s. That's been a few decades since then. Besides, touch devices already have usable interaction paradigms outside of the well-known and old WIMP. It's not clear that we have to perpetuate it just for the sake of it. – Joey Oct 07 '11 at 15:17
37

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/

Andy Baker
  • 21,158
  • 12
  • 58
  • 71
  • 6
    Sure, that's fine if clicking something doesn't do anything and only hovering does. But in most cases I've seen `:hover` triggers some auxiliary information, a tooltip or similar, regarding what happens when you click. Since you cannot separate the two on mobile devices a very large use case is lost. – Joey Oct 31 '12 at 15:32
  • 1
    @Јοеу - I agree but it's worth knowing that :hover isn't entirely a lost cause on touch devices. – Andy Baker Feb 02 '14 at 18:38
  • @zach-saucier I haven't done any more testing recently. – Andy Baker Feb 20 '14 at 09:07
  • 4
    Just want to add that ```:hover```on mobile devices is very unreliable. It is correct, as @andybak is saying, that it works, but for it to be reliable one has to use another approach to this problem. – magnudae Feb 02 '15 at 09:23
11

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.

David
  • 1,018
  • 13
  • 22
7

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

Nathan Long
  • 122,748
  • 97
  • 336
  • 451
  • 4
    For fingers that'd be a nigh-useless feature, though, as with the size of those devices you're very likely have your finger over anything that would react to the hover. Unless your fingers are translucent it would be pretty hard to see ;-) – Joey Mar 11 '10 at 18:13
  • 2
    +1 for that's coming! See [this](http://www.mobilemag.com/2010/04/22/cypress-truetouch-adds-hover-functions-to-touchscreens/) and [this](http://www.webia.info/articles/usability/the-change-is-here-hover-events-come-to-mobile-devices/) links, for example. – Sony Santos Oct 07 '11 at 05:56
3

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

BuZZ-dEE
  • 6,075
  • 12
  • 66
  • 96
dajam
  • 31
  • 1
3

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.

Digicoder
  • 1,835
  • 1
  • 12
  • 21
0

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.

Dustin Laine
  • 37,935
  • 10
  • 86
  • 125
0

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.

Bbub Mum
  • 11
  • 1
0

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)

silverskater
  • 821
  • 1
  • 6
  • 7
0

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

rlemon
  • 17,518
  • 14
  • 92
  • 123
0

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

BuZZ-dEE
  • 6,075
  • 12
  • 66
  • 96
Peter Zeller
  • 2,245
  • 19
  • 23