Question

有没有办法重置a：hover规则的背景颜色属性？

我有一个元素列表，当鼠标经过时会突出显示。我想应用一个禁用突出显示的额外CSS规则。这是一个演示：

我应该在“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删除editing the stylesheets的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

我能想到实现我想要的最简单的方法是为元素添加一个额外的类。我已选择＆＃39; hoverEnabled＆＃39;

您只需在类别中添加或删除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>

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

4 个答案: