Hiding content behind hovers

Pretty funny, right? Unless you’re using a smart phone, a tablet, or one of those two-in-one laptop/tablet hybrids without a mouse.

Why is this a problem?

It’s downright neglect of touch-only device users. Some sites take the awfulness a step further, and hide essential functionality behind a hover.

This is doubly unacceptable.

Why do web developers do this?

Admittedly, it looks pretty cool. But on a touch-only device, it’s much less likely to be discovered, if not impossible.

What if it’s revealed on click too?

It’s certainly an improvement:

jQuery( document ).ready(function() {
  jQuery( '.click-on-me' ).click(function() {
    jQuery( this ).toggleClass( 'toggled' );
  });
});

When adding click-reveal support it’s no longer a question of ability, but it’s still a question of awareness.

Can I detect a touch device?

The article You Can’t Detect a Touchscreen explains why touch device detection is not reliable.

Can’t I just use a max-width media query?

Don’t even think about it. The Surface Pro and iPad Pro have device widths of 1024 pixels.

Better yet, just don’t rely on hovers or clicks to reveal content

“It’s probably just best to avoid relying on hover states in the first place — use them for embellishments.”

Cheap tricks like fancy content-revealing hover effects should never be prioritized over basic usability needs. Touch device users should not be neglected.