Are Hover Events Still Usable In Touch-Based Dominated Web?

Posted on October 1, 2012 by

Hover event is among the most common pseudo class selectors used in CSS coding. In fact, it could be the only one many web designers ever learn. For years, both designers and users enjoy using this neat little feature, because they can significantly enrich user experience. Hover is easy to understand and easy to implement, which allows web developers to make user interactions feel a little better. However, latest developments in the industry could permanently change the way we think about hover event. For example, the ubiquity of touch-based devices could render hover events obsolete. With many millions of touch-based devices in use today, hover event poses a significant interaction issue.

Even before the proliferation of the World Wide Web, early GUI-based operating systems on desktops have had onscreen cursor. It was initially a strange mean of interacting with digital contents, but eventually widely accepted. Whether stylus or finger directed, touchscreen devices have been around for more than a decade long before the original iPhone appeared.

The iPhone wasn’t the first smartphone with touch-based interface, but it was definitely the first to offer non-watered down mobile web experience. Today, Android devices are dominating the smartphone market, due to more flexible pricing and choices of hardware configuration. Touch-based devices are so common that many new Internet users encounter the web initially through finger-driven interface. Perhaps until a Kinect-like gesture control is added to smartphones, hover events won’t be fully supported. One question that comes to our mind right away is whether this poses a problem to web developers.

Currently, many developers simply translate hover event to a tap event. This technique can be used both on Android and iOS, as well as other touch-based platform. However, tap event can’t fully simulate hover event. Once we tap on an element to trigger the hover event, we need to tap again to cease it.

The most significant revelation immediately comes when web designers realize that many hover elements occur on elements that also serve as links. It means, we could have click and hover events at the same on the same elements. So, what will happen? Most of the time, actions related to hover events begin when you tap the element. However, because the click event also redirects the page, hover action can’t complete. The big question would be, whether or not the hover event has a place in any CSS code in a time where an increasing number of users are using touch-based devices to browse the web. Although it comes with a few stipulations, the answer is still a resounding “Yes”! Some hover events implementations can still work nicely on touch-based devices. For example, dropdown menu that’s triggered by the hover event can still work well on smartphones and tablets.

Despite this, some experts still absolutely recommend against using hover events as the primary user interaction method. Doing so may set yourself and users up for unnecessary headaches. For example, we can’t be certain without performing a ridiculous amount of testing on many touch-based devices and mobile browsers. Regardless of techniques used, hover interactions won’t work perfectly on tablets and smartphones. However, this assumption shouldn’t prevent you from styling the layout with a few hover events. However, layout’s success shouldn’t depend on this action; rather use it to enhance the user experience progressively. Your layout should be usable at its most basic level, in case the hover events need to be excluded due to device’s limitations. Of course, it doesn’t hurt to have some visual thrills that only desktops users can see.

Hover events won’t be extinct anytime soon, but it’s become increasingly troublesome to rely on them as the primary mean of user interaction. Many experienced web designers still use hover events, but you should be aware that the days of hover-depended sites are long gone. Again, unless touch-based devices already incorporate gesture control, you shouldn’t immediately assume that hover events completely work on them.

Author :

  • Adam Scott