如何從懸停規則覆蓋和重置背景顏色屬性？

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>