How to deal with hover states when there is no possibility of hovering.

Published Aug 20, 2017Last updated Jan 17, 2018
How to deal with hover states when there is no possibility of hovering.

Hovers kinda work on iOS, right? but... it's not really a design decision on your part. Apple tries to detect the hover and then when you touch it / it adds the hover state... but what if that thing you just clicked was a link.

I recently worked on a tiny project and pulled in a visual designer friend of mine: James Gamboa to see what he could add.

Because I'm psychic - I guessed that he'd want to have a hover state for the 'project' names. I was right. But what about phones? I just wanted them to be regular visible text in that case. You have a lot less attention when you are goofing around waiting to get your hair cut and you're browsing some sites on your phone... it doesn't really suite the goal to offer too much of a 'visual' experience + Hovers don't really work...

Modernizr is really great tool to check for brower capabilities and context, but sometimes you just need to check 1 thing. Here's one way you can fork your style's with a little JavaScript test for touch:

// JavaScript
'use strict';

if ('ontouchstart' in window || 'ontouch' in window) {
  document.body.classList.add('touch-device');
} else {
  document.body.classList.add('non-touch-device');
}

or

// jQuery if you prefer
'use strict';

var $body = $('body');

if ('ontouchstart' in window || 'ontouch' in window) {
  $body.addClass('touch-device');
} else {
  $body.addClass('non-touch-device');
}

and then something like this in your stylesheet:

body.touch-device {
  background: red;
    /* here maybe the overlay is in place */
}

body.non-touch-device {
  background: blue;
    /* here maybe has a :hover to activate an overlay */
}

JavaScript version in a CodePen + debug view for phone

jQuery version in a CodePen + debug view for phone

Want to talk about it? Lets have a session:

@sheriffderek

Discover and read more posts from sheriffderek
get started