How to override and reset a background-color property from a hover rule?

Question

Is there a way to reset a background-color property of a :hover rule?

I have a list of elements which are highlighted when mouse goes over. I want to apply an additional CSS rule that will disable highlighting. Here is a demo:

http://jsfiddle.net/vqLuU/1/

What should I put in the second appearance of the "style1:hover" rule in order to disable highlighting at all? The result must be the same with case when all "style1:hover" rules are removed.

I do not want to redefine all styles ("green" and "blue") again. My goal is to disable the "style1:hover" rule.

HTML:

<div class="style1 green">AAA</div>
<div class="style1 blue">BBB</div>

CSS:

.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.style1:hover {
    background-color: red;
}

.style1:hover {
    /* How to disable highlighting from here? */

}

Thanks!

Answer 1

Since the first appearance of the .style1:hover rule cannot be changed or removed, the only way to achieve that is by adding the following rules:

.green:hover {
    background-color: green;
}
.blue:hover {
    background-color: blue;
}

I feel the need to add a disclaimer: this solution is not very elegant, and I don't think of it as the best solution, I think it's the only possible solution given the requirements.

Answer 2

.style1:hover {
    background-color: red;
}

.style1:hover {
    background-color: transparent !important;
}

Answer 3

Note: this may not be a viable solution as you have not mentioned whether you can use JavaScript.

You can remove the CSS rule by editing the stylesheets with JavaScript. However it doesn't feel right to me, so I can't fully recommend this =) Maybe other SOers can comment on this method (see jsFiddle ).

for (var i = 0; i < document.styleSheets.length; i++ ) {
    var done = false;
    var sheet = document.styleSheets[i];
    # Some browsers use rules (Chrome) others use cssRules (Firefox)
    var rules = sheet.rules || sheet.cssRules;

    for (var j = 0; j < rules.length; j++) {
        var rule = rules[j];
        var selectorText = rule.selectorText;

        if (selectorText.indexOf(".style1:hover") != -1) {
            sheet.deleteRule(j);
            done = true;
            break;
        }
    }

    if (done) break;
}

Answer 4

Easiest way I can think to achieve what I think you want is to add an extra class to the elements. I've chosen 'hoverEnabled'

You can simply add or remove the class hoverEnabled to an element to have a different :hover style attached.

CSS

.green {
    background-color: green;
}
.blue {
    background-color: blue;
}
.style1.hoverEnabled:hover {
    background-color: #FFAAAA;
}

.style2.hoverEnabled:hover {
    background-color: #AAAAAA;
}

HTML

<div class="style1 green">AAA</div>
<div class="style1 blue">BBB</div>
<div class="style1 hoverEnabled green">AAA</div>
<div class="style2 hoverEnabled blue">BBB</div>