大家看看这种样式效果该怎么实现

大家看看这种样式效果该如何实现？
<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中呢？

谢谢大家！

------解决方案--------------------------------------------------------
onclick= "secBoard(0) "

鼠标经过的时候变色,,要用onmouseover和onmouseout
------解决方案--------------------------------------------------------
<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}

------解决方案--------------------------------------------------------
顶