在用Javascript更改背景颜色后:hover don'不要改变颜色

After a background color change with Javascript the :hover don't change the color

本文关键字：变颜色 改变 don hover Javascript 背景 颜色 在用      更新时间：2023-09-26

我有一个包含许多字段的长表单。一些字段从单独的DIV获取数据，其中还有其他更具体的字段。

每个字段及其标签都包含在一个单独的块中。为了突出显示这些字段，它们的类有一个CSS :hover。

字段块上的CSS :hover工作顺利，许多DIV上的onmouseover和onmouseout也使用以下Javascript将数据传递给它们：

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

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

Firefox 36.0.3和Chrome 39.0.2171.71都会出现这种情况，它们运行在Slackware当前版本上。

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

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

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

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

  • 样式属性=a
  • 选择器中的ID属性数=b
  • 选择器中其他属性和伪类的数量=c
  • 选择器中的元素名称和伪元素数=d

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

相关文章：