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

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;
}