Skip to content

Instantly share code, notes, and snippets.

@vasilisvg

vasilisvg/no-touch-hover.md

Created October 10, 2011 16:57
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vasilisvg/1275792 to your computer and use it in GitHub Desktop.
Save vasilisvg/1275792 to your computer and use it in GitHub Desktop.
Download ZIP
Set :hover for non-touch devices only
Raw
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; }
@imme-emosol
Copy link

Perhaps useful for someone, vim rewrite/substitute commands:

:%s/^([\t ]*)(.{-}):hover/\1.no-touch \2:hover/gc

or

:%s/^([\t ]*)(.{-}):hover/\1.no-touch \2:hover ,\r\1.no-js \2:hover/gc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment