Change attribute of CSS Pseudo classes (:hover) with jQuery

Question

Is it even possible to change the pseudo classes with jQuery ? Is there any workaround for achieving this?

A few days ago I found a jQuery-style library to access stylesheets, but now I can't find it again, all I find are stylesheet switchers. — Barmar, May 13 '13 at 23:56
Not sure I understand. Could you elaborate? What exactly do you want to change? — VVV, May 13 '13 at 23:56

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

2

Try to create a class selector to your CSS, and toggle the class on and off for the element you would like to change style/anything when you hover over it.

Here are other suggestions: Setting CSS pseudo-class rules from JavaScript

Dynamic CSS pseudo class styles with jQuery

edited May 23 '17 at 12:14

Community

1
1

answered May 14 '13 at 00:08

yvonnezoe

7,129
8
30
47

Definitely this. Using Javascript to change individual CSS properties is very messy.. just switch the class! – benastan May 14 '13 at 00:27
The problem with changing the class is that you might be using a color-picker. – Bing Feb 05 '14 at 20:49

score 0 · Accepted Answer · answered May 14 '13 at 00:12

Well I created the following function to change my hover class

var setPseudoClass = function (rule, prop, value)
    {
        var sheets = document.styleSheets;
        var slen = sheets.length;
        for (var i = 0; i < slen; i++)
        {
            var rules = document.styleSheets[i].cssRules;
            if (rules)
            {
                var rlen = rules.length;
                for (var j = 0; j < rlen; j++)
                {
                    if (rules[j].selectorText && rules[j].selectorText.indexOf(rule) > 0)
                    {
                        alert(rules[j].selectorText);
                        rules[j].style[prop] = value;
                    }
                }
            }
        }
    }

Change attribute of CSS Pseudo classes (:hover) with jQuery

2 Answers2