:hover behavior across mobile devices

Question

While developing the mobile navigation menu for a site I am redesigning, I discovered that a number of mobile browsers trigger the CSS :hover event through a tap, including Chrome, FlashFox, and the default browser on Android 4.x, as well as Safari on iOS 7. Is this behavior wide spread enough to rely on? I'm assuming issues might arise with Android 2.x phones.

I'm wondering if anyone's had any experience with this and if this behavior is safe to rely on for my navigation menu. Also is there any kind of spec that defines this behavior, or did it just kind of appear? From what I've seen it appears to perform pretty uniformly across devices.

I've done mobile navigation menus before with JavaScript, but this would be a nice alternative.

I know there are a couple questions that deal with this topic on stackoverflow, but they are pretty old, and I couldn't find any question dealing specifically with what I wanted to know.

EDIT: To clarify, the site is being developed with responsive design, and I'm not simply trying to use the desktop style navigation bar with :hover. The menu is formatted for mobile, and the :hover would replace the need to write JavaScript to reveal sub-menus when a menu option is tapped.

Oh yeah, `:hover` events drive me nuts when I'm surfing with my mobile device, especially when menus open up on hover... — ConcurrentHashMap, Aug 24 '14 at 17:52
possible duplicate of [Does css hover work on mobile devices?](http://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices) — Audrius Meškauskas, Aug 24 '14 at 17:59
That question is old and is almost completely irrelevant to the behavior I observed and am asking about; Android 2 was brand new when it was answered/asked — Greg Rozmarynowycz, Aug 24 '14 at 18:00
I use it quite a lot and it works fine, so I rely on it, but just in case leave a JS fallback for the time being — Devin, Aug 24 '14 at 18:34

score 5 · Accepted Answer · answered Aug 24 '14 at 18:47

5

Some say use :hover, others say use :active. I say use both (in one rule) and the device will use the one (or both) that works on that device.

I find it works, anyway.

Hope this helps.

answered Aug 24 '14 at 18:47

worldofjr

3,868
8
37
49

Thanks for the `:active`, I'm going to wait a little bit and see if anything else comes up, but this helps – Greg Rozmarynowycz Aug 24 '14 at 19:31
The way I structured my menu, the `active` can't actually apply to this particular project, but it was the only answer so you get the credit – Greg Rozmarynowycz Aug 27 '14 at 02:27
http://quirksmode.org/css/selectors/hover.html Interesting info there on `:hover` and `:active`. – bloodyKnuckles Nov 28 '16 at 15:05

:hover behavior across mobile devices

1 Answers1