Menu
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.
917
There are no mouse devices on mobile, so users don't have the luxury of using hover effects. Using a hover effect on mobile apps causes buttons to stay stuck in the hovered state when tapped. This stickiness not only confuses users, but it frustrates them when they're forced to double-tap buttons to initiate an action.
For obvious reasons the hover event only makes sense on those devices equipped with a mouse, touchpad, etc. The most you can do on smartphone, is to make the hover text always visible.
The scrolling behavior in smartphones is different from dragging a cursor using a mouse. Thus, the hover behavior is not available on touch screen devices. For instance, if you create a button with a hover effect on mobile, it would be terrible since your user may have to tap the button twice to activate its function.
As you know, :hover behavior doesn't exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use :hover interactions. Simple links that open some URL will loose their :hover effect on some touch screen devices.
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.
157
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
