Question

当鼠标悬停在表格上时，我试图让表格的行有一个高亮颜色，我希望整行可以选择。我试过了：

<tr onmouseover="ChangeColor(this, true);" 
              onmouseout="ChangeColor(this, false);" 
              onclick="DoNav('http://www.yahoo.com/');">

但问题是我有一个外部css样式表，为这些单独的行着色，如果它们是我的css样式表中指定的颜色，则更改颜色的javascript代码无效。所以例如我希望行正常为绿色，并在悬停和点击时突出显示白色。如果我将颜色指定为绿色，那么它总是绿色，即使我将鼠标悬停在它们上面也是如此。如果我没有指定为绿色的颜色那么javascript工作。这很烦人。我也有行的颜色交替。

任何人都可以帮我解决一个简单的解决方案吗？

这里是我用于onmousehover和onmouseclick的javascript函数：

function ChangeColor(tableRow, highLight)
{
    if (highLight)
    {
      tableRow.style.backgroundColor = '#89ae37';
    }
    else if (this.class == alt)
    {
        tableRow.style.backgroundColor = '#EAF2D3';
    }   
    else
    {
        tableRow.style.backgroundColor = '#A7C942';
    }
}

function DoNav(theUrl)
{
  document.location.href = theUrl;
}

Answer 1

如果你把类似下面的东西放到你的样式表中，你可以完全没有JS的悬停效果：

tr:nth-child(odd) { background-color : #EAF2D3; }
tr:nth-child(even) { background-color : #A7C942; }
tr:hover { background-color : #89ae37; }

演示：http://jsfiddle.net/nnnnnn/zHgsf/

请注意，您甚至不需要在备用行上指定class="alt"，因为:nth-child(odd)和:nth-child(even)选择器会为您处理。

Answer 2

这种行为似乎是样式应用程序，而不是提供任何逻辑，这些逻辑让我放在样式表而不是JavaScript中。

要在 CSS 中实现与您的示例匹配的表格的整行，：

table tr {
    background: #a7c942;
}
table tr:hover {
    background: #89ae37;
}
table tr.alt:hover {
    background: #eaf2d3;
}

Answer 3

你可以通过添加和删除一个css类来实现这一点，这个css类可以做的不仅仅是背景颜色。这是我为你做的一个例子，它改变了鼠标悬停的背景。

http://jsfiddle.net/zHr4n/8/

使表行可选

3 个答案: