大家看看这种样式效果该如何实现？

Question

<td align="center" class="sec2" onclick="secBoard(0)" width="100">安装申请</td>
<td align="center" class="sec1" onclick="secBoard(1)" width="100">修理申请</td>
<td align="center" class="sec1" onclick="secBoard(2)" width="100">设备停用</td>引用的样式表文件如下：
TD { FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 150% ;text-align:center }
.sec1 { BORDER-RIGHT: gray 1px solid; }
.sec2 { BORDER-RIGHT: gray 1px solid; ｝现在我想让上面3个TD中的文字在鼠标经过的时候变色，我知道要变色是这样写的：A:hover {COLOR: #ffffff; TEXT-DECORATION: none}，但是我的TD已经指定了.sec1的样式，怎么样能把A:hover {COLOR: #ffffff; TEXT-DECORATION: none}加入到.sec1中呢？谢谢大家！

Answer 1

onclick="secBoard(0)" 鼠标经过的时候变色,,要用onmouseover和onmouseout

Answer 2

<td align="center" class="sec2" onclick="secBoard(0)" width="100">安装申请</td>
修改如下：
<td align="center" class="sec2" onmouseover='changeColor(1);' onmouseout='changeColor(2)' onclick="secBoard(0)" width="100" id='td1'>安装申请</td>function changeColor(i)
{
if(i==1)
{
document.getElementById("td1").className = "style1";
}
if(i==2)
{
document.getElementById("td1").className = "style2";
}
}
.style1{color:#f00;}
.style2{color:#fff}

Answer 3

谢楼上，其实不必写的那样麻烦，直接这样就行了吧？
<td align="center" class="sec2" onmouseover="this.classname='style1'" onmouseout="this.classname='style2'" onclick="secBoard(0)" width="100" id='td1'>安装申请</td>.style1{color:#f00;}
.style2{color:#fff}
但是我想要的效果是文字变色啊