We simply couldn’t ignore the fact that Internet became mobile, and in addition to usual responsive behavior we decided to refine the hover events for mobile devices. You may ask: what’s wrong with the standard mobile hover events? Well …
What’s wrong with the standard mobile hover events
As you may know the nature of touch events differs a lot from the way we use mouse device. Touch devices has no native “hover” event as they cannot (yet) predict that you’re planning to click some element. But hover events are so got used in the web experience that touch devices have to emulate them: when element has css hover state, the first touch will show hovered state and the second one will be treated as click event. That becomes quite annoying when it comes to navigational elements like menu items and banners.
So we thought: what a good banners touch hover event should be like? Number one rule: when a user wants to click it, he should be able to do it on a first try. And in terms of hover as some kind of focus here’s the first event type that comes to mind:
- Touchstart is the same as mouseenter (hovered state becomes on)
- Touchend is the same as mouseleave (hovered state becomes off)
And if they both triggered at the same element, it should be treated as a click just from the start.
What’s not ok with this option? We may have some call-to-action button that is shown only on hover, and which is actually should be clicked.
At some point we decided to abstract from the conventional understanding of hover event and found out that it could give a user even more abilities this way. So we made touchstart toggle hovered state for such elements, through which users can toggle hover state at several elements at the same time, expanding theirs experience from a page and elements.
P.S. What do you think about it? What the good mobile hover event should be like?