Don't show hover state on touch devices

Question

Is this possible? Short of converting all my hover styles into mouseover listeners is it possible to stop a touch device from triggering the CSS hover state?

I have an application that must work on both touch and pointer input, it works great but certain styles applied on hover just don't make sense on touch devices because they tend to retain the hover state indefinitely after a user has tapped an object.

Things to take into account:

Device width bears no correlation with touch enabled devices to me, the touch screens we are using here are desktop size monitors.
I don't want to force a user to input via touch on a multi-input device.

I found your question quite interresting and came accros [the following article](http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/). Not the same issue, but would the solution in the bottom of the article apply to your situation ? — Laurent S., Jul 01 '13 at 14:46
@Bartdude Thanks, my only gripe with that detection is I believe it detects whether the device is capable of touch input, not whether it is using touch input. Which is better than nothing but not optimal as it breaks my second rule about forcing a user to input via touch on a multi-input device. It also doesn't work for IE10 AFAIK (uses a proprietary event which for once I think IE got right, well... that and the box model) although you can attempt to detect that too. — George Reith, Jul 01 '13 at 15:47

score 2 · Answer 1 · edited May 23 '17 at 12:06

2

I had solved this problem following the approach shared in the link in the comments above. If you're not using it, consider using Modernizr in this scenario. Would like to hear some other approaches as well...

As user, Blender mentions, you can check against touch events like so:

html.touch {
  /* Touch Device ~ No Hovers */
}

html.no-touch {
  /* Not a Touch is disabled */
}
html.no-touch .element:hover {
   opacity:.5;
}

edited May 23 '17 at 12:06

Community

1
1

answered Jul 01 '13 at 15:00

Scott Meyers

161
6

Thanks, this is an interesting point. Although I am not sure if Modernizr successfully detects devices with actual touch input or devices that have the potential. Which brings another problem is I am forcing users of a multi-input device to use touch input instead of a pointer (at least to make their experience intuitive). – George Reith Jul 01 '13 at 15:40
Digging into Modernizr touch detection function, it checks in the following manner: `if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {` – Scott Meyers Jul 01 '13 at 16:45
So your suspicions are correct in that the test only indicates if the browser supports touch events, but not necessarily if it's a touch device. Now you've got me going... Please update with your final approach. – Scott Meyers Jul 01 '13 at 16:53

score 0 · Answer 2 · answered Aug 25 '14 at 12:29

My solution is to add hover-active css class to the HTML tag, and use it on the beginning of all the CSS selectors with :hover and remove that class on the first touchstart event.

http://codepen.io/Bnaya/pen/EoJlb

JS:

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML:

<html class="hover-active">

CSS:

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

Don't show hover state on touch devices

2 Answers2