How do I remove :hover?

Question

I have a small problem with a script.
I want to have a default action on :hover for clients with Javascript disabled, but for those with Javascript enabled

Answer 1

It's a very old question but I feel the urge to tell that modernizr provides a very good way to implement these kind of fallbacks.

Just include modernizr in the head and you can do these:

.no-js a:hover {
   set background color and stuff like that
   for cases when no javascript is present
}

On the other hand if you want to do this the other way and only set css when js is present

.js a:hover {
   set background color to default
   and the text decoration
}

It is more or less the same solution as adding a hover tag to the markup, but a little more robust.

Answer 2

How about putting the :hover fall-back in a stylesheet that is only loaded if javascript is disabled?

<noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>

Answer 3

You could strip all :hover style rules from document.styleSheets.

Just go through all CSS styles with JavaScript and remove all rules, which contain ":hover" in their selector. I use this method when I need to remove :hover styles from bootstrap 2.

_.each(document.styleSheets, function (sheet) { 
    var rulesToLoose = []; 
    _.each(sheet.cssRules, function (rule, index) { 
        if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) { 
            rulesToLoose.push(index);
        }
    });

    _.each(rulesToLoose.reverse(), function (index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else if (sheet.removeRule) {
            sheet.removeRule(index);
        }
    });
});

I did use underscore for iterating arrays, but one could write those with pure js loop as well:

for (var i = 0; i < document.styleSheets.length; i++) {}