使用Javascript更改背景颜色后：悬停不会更改颜色

Question

我有很多领域的长篇。有些字段从单独的DIV获取数据，其中还有其他更具体的字段。

每个字段及其标签都包含在一个单独的块中。要突出显示字段，请为其类添加一个CSS :hover。

使用以下Javascript，字段块上的CSS :hover可以顺利运行，onmouseover和onmouseout可以通过许多DIV向他们传递数据：< / p>

function LineOn(whichOne) {
    document.getElementById(whichOne).style.backgroundColor = '#cf0';
}

function LineOff(whichOne) {
    document.getElementById(whichOne).style.backgroundColor = '#fff';
}

但是，在执行Javascript之后，hover停止工作（即块保持白色），而不报告任何控制台错误或消息。

在Slackware当前版本上运行的Firefox 36.0.3和Chrome 39.0.2171.71都会发生这种情况。

是否有一种层次结构赋予使用Javascript的背景颜色集优先于<style>部分中定义的颜色？

Answer 1

是的，直接在元素的style属性中定义的样式会覆盖CSS中设置的任何值，除非该样式具有！important。

CSS特异性http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector

选择器的优先级由选择器组合点决定。

• style attribute = a
• selector = b
中的ID属性数
• selector = c
中的其他属性和伪类的数量
• selector = d
中的元素名称和伪元素的数量

这是不设置样式属性的一个很好的理由;而是设置了一个CSS类。