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

Published Aug 20, 2017Last updated Nov 18, 2017
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 it that thing you just clicked was a link.

I recently worked on a tiny project (still working on it as of this date) - and pulled in a 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 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 cool, 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;
}

body.non-touch-device {
  background: blue;
}

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
Enjoy this post?

Leave a like and comment for sheriffderek

5