javascript - 如何使用 Javascript 将鼠标悬停在表格单元格上？

Question

我的表格在行上具有悬停功能，我正在尝试将其更改为悬停在单元格上

这是我当前的脚本:

<script type="text/javascript">
    window.onload=function(){
    var tfrow = document.getElementById('tfhover').rows.length;
    var tbRow=[];
    for (var i=1;i<tfrow;i++) {
        tbRow[i]=document.getElementById('tfhover').rows[i];
        tbRow[i].onmouseover = function(){
          this.style.backgroundColor = '#f3f8aa';
        };
        tbRow[i].onmouseout = function() {
          this.style.backgroundColor = '#ffffff';
        };
    }
};
</script>

到目前为止我试图改变但仍然不起作用:

<script type="text/javascript">
    window.onload=function(){
    var tfcell = document.getElementById('tfhover').cells.length;
    var tbCell=[];
    for (var i=1;i<tfcell;i++) {
        tbCell[i]=document.getElementById('tfhover').cells[i];
        tbCell[i].onmouseover = function(){
          this.style.backgroundColor = '#f3f8aa';
        };
        tbCell[i].onmouseout = function() {
          this.style.backgroundColor = '#ffffff';
        };
    }
};
</script>

如何使用我的脚本实现在单元格上悬停而不是在行上悬停？

Answer 1

您可以使用常规 CSS 来实现此目的:

#tfhover td {
    background-color: #fff;
}
#tfhover td:hover {
    background-color: #f3f8aa;
}

感谢@Mike Brant 指出缺少的表 ID