Skip to content

Instantly share code, notes, and snippets.

@javan

javan/remove_hover.js.coffee

Created December 29, 2012 04:05
Show Gist options
  • Save javan/4404503 to your computer and use it in GitHub Desktop.
Save javan/4404503 to your computer and use it in GitHub Desktop.
Download ZIP
Remove :hover styles from mobile browsers
Raw
remove_hover.js.coffee
if 'createTouch' of document
ignore = /:hover\b/
try
for stylesheet in document.styleSheets
idxs = []
# detect hover rules
for rule, idx in stylesheet.cssRules
if rule.type is CSSRule.STYLE_RULE and ignore.test(rule.selectorText)
idxs.unshift idx
# delete hover rules
stylesheet.deleteRule idx for idx in idxs
@javan
Copy link
Author

javan commented Dec 29, 2012

Copied from https://github.com/mislav/movieapp/blob/master/app/assets/javascripts/touch_nohover.coffee

@olsonpm
Copy link

olsonpm commented Nov 25, 2014

In case you want to include css styles with the ":not(:hover)", you can use the following regex

/:hover(?!\))\b/

Forewarning, negative lookbehinds aren't supported in js, so this regex makes a big assumption:

  • Allows all styles with ":hover" immediately followed by ")"

In my website, I will only ever surround :hover with parentheses in the context of a "not()" operation. You may not be able to assume that in your website.

@sinak
Copy link

sinak commented Feb 6, 2015

Just wanted to point anyone who lands here to https://gist.github.com/sweatpantsninja/5400379, which is based on this gist but only removes the specific selectors with :hover, rather than the entire css rule.

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