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.