Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Set :hover for non-touch devices only

View no-touch-hover.md

No :hover for touch devices

Some touch devices trigger the mouseover event on the first touch when something changes visibly. This happens even with simple changes like a new color or removal of an underline. The click-event only fires the second time you touch.

This is easy to solve, if modernizr is included, by adding the class .no-touch to each :hover rule.

.no-touch a:hover { color: #06e; }

This code will also kill hover states in environments where JS has not been executed. To solve this you would have to extend the code a bit and add class=no-js to the head of the document.

.no-touch a:hover,
.no-js a:hover { color: #06e; }

That's clever... is there any cleaner solution for that, though?

If you don't use Modernizr you can create your own no-touch in document using this code:

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

props to: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.