怎么方便的实现这种效果：当鼠标移到<td>单元格中时，单元格中的超连接文本变色，同时单元格背景色也发生变化？就象www.rongshu.com上面

<map name=home2>
<area shape=rect coords=100,100,500,500 cursor:hand> 
</map>
<style>
.flyoutMenu {
background-color: #F1F1F1;
border-color: #999999;
border-width: 0 1px 1px 0;
border-style: solid;
}
.flyoutMenu TD.flyoutLink  {
border-color: #F1F1F1;
border-width: 1px;
border-style: solid;
font-family: Verdana,Arial;
font-size: 70%;
padding: 1px 25px 3px 6px;
cursor: hand;
}
.flyoutLink a {
color: black;
text-decoration: none;
}
.flyoutLink a:hover {
color: black;
text-decoration: none;
}
.flyoutLink a:visited {
color: black;
text-decoration: none;
}
.flyoutLink a:active {
color: black;
text-decoration: none;
}

</style>
<script>
function over(){
if(obj=event.srcElement)
if(obj.className=="flyoutLink"){
obj.style.backgroundColor='#cccccc'
obj.style.borderColor = '#999999'

}
}
function out(){
if(obj=event.srcElement)
if(obj.className=="flyoutLink"){
obj.style.backgroundColor='#f1f1f1'
obj.style.borderColor = '#f1f1f1'
                        
}
}
document.onmouseover=over
document.onmouseout=out
</script>
<table class="flyoutMenu" width="180" cellpadding="2" cellspacing="0" border="0" >
<tr><td class="flyoutLink">你好</td></tr>

</Table>