如何从悬停规则覆盖和重置背景颜色属性？

Question

有没有办法重置：hover规则的background-color属性？

我有一个鼠标悬停时突出显示的元素列表。 我想应用一条附加的CSS规则，该规则将禁用突出显示。 这是一个演示：

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

为了完全禁用突出显示，我应该在“ style1：hover”规则的第二次显示中添加什么？ 当删除所有“ style1：hover”规则时，结果必须相同。

我不想重新定义所有样式（“绿色”和“蓝色”）。 我的目标是禁用“ style1：hover”规则。

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? */

}

谢谢！

Answer 1

由于无法更改或删除.style1:hover规则的首次出现，因此，实现此目标的唯一方法是添加以下规则：

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

我觉得需要添加一个免责声明：这个解决方案不是很优雅，我不认为它是最好的解决方案，我认为这是满足要求的唯一可行解决方案。

Answer 2

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

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

Answer 3

注意：这可能不是一个可行的解决方案，因为您没有提到是否可以使用JavaScript。

您可以通过使用JavaScript 编辑样式表来删除CSS规则。 但是对我来说感觉不对，所以我不能完全推荐这个=）也许其他SOers可以评论这个方法（参见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

我能想到实现我想要的最简单的方法是为元素添加一个额外的类。 我选择了“ hoverEnabled”

您可以简单地将类hoverEnabled添加或删除到元素，以使其具有不同的:hover样式。

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>