今天需要制作这样的一个左侧导航效果，就是鼠标放到 td 表格里面，表格背景和文字颜色全变，比如现在的背景是白色，放上去背景变成红色，在表格里面的导航文字也要由黑色变成白色，当鼠标离开后就恢复正常，在网上找了许久都没找到合适的代码，要么就 js 一大堆不容易进行修改，要么就是 div+css 一大堆，哎，夏日博客用的是 table，有点不能淡定了，结合了网上的 DIV 查式代码，自己又写了一些 CSS 控制样式，这个效果终于做出来了，下面直接分享代码:

<style type="text/css">
<!--
td.off { font-size:13px; display:block; text-decoration:none; background-image: url('images/Lj_02.jpg'); color:#ffffff; cursor:pointer; padding-left:40px;}

td.on { text-decoration:none; color:#ffffff;background-image: url('images/Lj_01.jpg'); cursor:pointer; padding-left:40px;}

a.off:link{ font-size: 13px; color:#093D69; cursor:pointer;display: block; height:43px; line-height:43px;}
a.off:active{ font-size: 13px; color:#093D69; cursor:pointer;height:43px;}
a.off:visited{ font-size: 13px; color:#093D69; cursor:pointer;height:43px;}
a.off:hover{ font-size: 13px; color:#fff; cursor:pointer; height:43px;}
</style>

<table width="220" height="43" border="0" cellpadding="0" cellspacing="0" class="xiariboke">
<tr>
<td width="180" align="left" class="off" onMouseOver="this.className='on'" onMouseOut="this.className='off'"><a href="#" class="off" title="欧式系列">欧式系列</a></td>
</tr>
</table>

直接保存成 xiariboke.html 进行运行一下就可以看出效果，要记得 images/Lj_02.jpg 和 images/Lj_01.jpg 两张背景图片，其中 images/Lj_02.jpg 是白色背景的图片，当然不是纯白的，在图片的左侧可以自定义一个小箭头之类的图标，images/Lj_01.jpg 是红色背景图片，具体的根据自己的要求修改一下吧。