只有部分 CSS 处于活动状态

Question

我需要一些帮助。对于学校作业，我应该突出显示用户鼠标光标悬停在表格上的行。我知道你可以用 CSS 轻松做到这一点，但老师特别指出他希望用 Javascript 完成。无论如何，我已经完成了大部分。该行突出显示，但有一个小问题。

我遇到的问题是当鼠标悬停在表格行上时，我的 CSS 中唯一有效的 .highlight 规则部分是背景颜色规则。我的颜色规则被忽略了。我希望背景为黑色，文本为红色。进一步澄清一下，就目前而言，当鼠标悬停在表格行上时，背景颜色会发生变化（从浅蓝色变为黑色）并且文本颜色保持不变（深蓝色）。它永远不会像它应该的那样变成红色。这可能是我想念的非常小而愚蠢的东西。谁能帮帮我？

提前致谢。

我的 javascript 代码：

function highlightRows(){

  var rows;    
  var tables = document.getElementsByTagName("table");
  var numTables = tables.length;
  var before;

   for(var x = 0; x < numTables; x++){
    if(tables[x].getAttribute("class") == "stripe_table"){

      rows = tables[x].getElementsByTagName("tr");

      var numRows = rows.length;
      for (var i=1; i < numRows; i++){

        var j= i;
        var k= i+1;   

        rows[j].onmouseover=function(){
          before = this.className;
          this.className = "highlight";

          this.onmouseout = function(){
            this.className = before;
          };
        };

        rows[k].onmouseover=function(){
          before = this.className;
          this.className = "highlight";

          this.onmouseout = function(){
            this.className =  before;
          };
        };

        if(i == rows.length - 2)
          break;
      }
    }
  }
}

我的 CSS：

table{ 
    width:800px; 
    border: 0;
    font-family: sans-serif;
    border-collapse: collapse;
}
caption{
    font-weight: bold;
}
tr > th{
    background-color: blue;
    color: white;
    font-weight: bold;
    border: none;
}
td{
    color: darkblue;
    border: none;
    padding-left: 4px;
}
tbody{
    background-color: lightblue;
}
.orange{
    background-color: orange;
}
.highlight{
    color: red;
    background-color: black;
}

Answer 1

发生这种情况是因为 td 的颜色规则覆盖了 CSS 中 tr 的规则。一个 quikc-fix 将移动 color: darkblue; 以统治 tr。