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的规则。

只有部分CSS处于活动状态

1 个答案: