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

UPDATE: It might not be new... but it was news to me - that I could check for hover capabilities with an @media rule.

@media(hover:hover) {
  /* hover stuff! *?
}

And if you like SCSS or something like it (I think Stylus is pretty awesome...) - you can make a little mixin like this:

@mixin hover-setup() {
  //
  @media(hover: hover) {
    @content;
  }
}


@mixin on-hover() {
  //
  @media(hover: hover) {
    &:hover {
      @content;
    }
  }
}

Then in your styles - use it like this:

.item {
  color: red;
  key: value;
  @include hover-setup() {
    color: blue;
  }
  @include on-hover {
    background: green;
    color: black;
  }
}

It's a little more work... but it has some added benefits for touch response times - and it keeps things nice and declarative.

Stylus syntax might look a little cleaner - depending on your taste:

.item
  padding: $pad
  hover-setup()
    opacity: .7 // don't want this as a defalt unless hovering, right?
  on-hover()
    transition: opacity .2s
    opacity: 1

This seems really clear! Standard stuff... anything special to setup hover situations (such as an opacity: .5) and then the hover state. All neat and clear. : )

Want to talk about it? Lets have a session:

@sheriffderek

......

I'm working full-time now - with Perpetual Education on their new learning platform. Check it out! It's by far the best way to learn design and development for the least money and the fastest results - and it's really fun. Seriously.

→ https://perpetual.education

Free advice sessions: no strings attached - just a real human who wants to help you become a great designer.