3

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

我有一个元素列表，当鼠标经过时会突出显示。我想应用一个额外的 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? */

}

谢谢！

4

4 回答 4

4

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

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

我觉得有必要添加一个免责声明：这个解决方案不是很优雅，我不认为它是最好的解决方案，我认为它是给定要求的唯一可能的解决方案。

于 2013-09-09T17:41:11.620 回答
2 
.style1:hover {
    background-color: red;
}

.style1:hover {
    background-color: transparent !important;
}
于 2013-09-09T17:31:37.057 回答
2

注意：这可能不是一个可行的解决方案，因为您没有提到是否可以使用 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;
}
于 2013-09-09T18:36:34.093 回答
0

我能想到的最简单的方法是为元素添加一个额外的类。我选择了“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>
于 2013-09-09T17:40:53.400 回答