当鼠标悬停在表格的行上时,我试图使表格的行具有高亮颜色,并且我希望整行都可以选择。我试过:
<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;
}
如果你在你的样式表中加入类似下面的东西,你可以在没有 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)
选择器会为您处理。
我是一名优秀的程序员,十分优秀!