When :Hover States on Touch Mobile Devices Aren’t Working

I was recently working with Fundify by Astoundify for a client and while testing the mobile aspect, found a weird issue. On the desktop, when you hover over a parent menu item called “ALL”, a list drops down. To create this effect, they used the CSS hover effect like so:

.menu ul.child { display:none; }
.menu:hover ul.child { display:block; }

It was a nice beautiful application of the :hover state to create drop-down menus.

However, this hover states reacts differently on touch screens. If you tried this out on a touch screen, the initial “display:block” will work when you click on the menu, but the menu won’t disappear. Unless you click a link.

This can make it annoying for the user who now has a drop-down menu covering up a significant portion of their screen real estate.

But there’s a quick and easy solution for this!

On the normal state above, add “cursor:pointer”:

.menu ul.child { display:block; cursor:pointer; }

Next, add a media query for screens smaller than a certain size. I used 800pixels, though you could go larger.

@media (max-width: 800px) {
 body { cursor:pointer; }
}

This causes the mobile screens to see the rest of the page as clickable, and therefore, removes the :hover state from the link.

Weird? Yes. Absolutely. But it works.