The end of :hover

Interesting post on the realization that :hover (in CSS, this defines what occurs when the mouse is over an HTML element) is no longer viable for layout on touchscreen devices.

When I sat down to a redesign of the Gameplan2 admin interface I suddenly came to a realisation, :hover doesn’t work. It’s entirely possible I’d skim read this somewhere, but somehow the implications for my design work had passed me by until I saw an iPad in use.

I came to the same realization when designing the Ekkio web client, and realizing I couldn’t open the file and folder submenus on my Palm Pixi.

Ekkio web client submenu

The arrows on the left would only appear when the user hovered over a file or folder. The solution, as shown, was to always show the arrows, but make then a lighter shade; on hover or when the dropdown is open, the arrows become a darker shade. This works well, despite the visual clutter of the arrows always being visible.

I agree with Croll’s conclusion,

So my proposition is this: :hover as an web interface design tool going forward is going to be less and less important.

I see :hover (and javascript mouse events such as onmouseover, for that matter) being unused or used only for non-essential stuff, such as added visual flair.

On a related note, touchscreen also don’t allow viewing the alt-text when hovering over an image. This is probably not a big deal when it comes to web layout, but it sucks for reading xkcd.

1 Comment

  1. […] The most significant changes are to the main interface. There’s a new look and you’ll notice support for uploading photos. Also, there’s now a 2-column layout; this avoid the issue of having to keep scrolling down the page to show a new location on the map (which was at the top of the page). The map and header areas are fixed (position: fixed), so as you scroll, only the list of locations on the left will move. I debated whether to do this or to contain the list of locations in a div with overflow:auto or overflow:scroll, so the list would have its own scrollbar, and you wouldn’t scroll the entire page to move up and down the list. I have somewhat of a dislike for both solutions, although one was necessary. I opted for the position:fixed approach because manipulating scrollbars within a page is impossible on a touchscreen device (perhaps we’re at the time where we’ll see the end of overflow:auto and overflow:scroll, along with :hover) […]