先上个截图吧！看的更明白点
首先要有表格：在html的body中写上如下代码：
其实就是一张表格，有14行，每行都有一个图片加上一个超级链接
然后再head中加上如下javascript代码：
<script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
$("table tr").hover(function() {
$(this).css("background-color", "#B2E1F1");
}, function() {
$(this).css("background-color", "");
});
});
这里用到了jquery框架，所以要导入这个文件
然后当你的鼠标在这14行滚动时，就会使这一行的颜色改变成你想要的颜色，
当你的鼠标离开时，颜色也就消失了
还有一点，当你单击了某一行时，就算你的鼠标离开，这一行的也会显示一种颜色，这里我用的是同一种颜色，其代码如下：加在javascript中
function changeColor(a) {
for ( var i = 1; i <= 14; i++) {
document.getElementById("menu" + i).className = "Normal";
}
document.getElementById("menu" + a).className = "Current";
}
然后再写上一句CSS代码：
<style type="text/css">
.Normal{background:none; /*没选择的不显示任何颜色*/}
.Current{background: #B2E1F1; /*选择了的显示某一种颜色*/}
</style>
其效果如下
注解：当鼠标停在上面时，其实都有应该有鼠标的手型在上面的，但是由于截图，就显示不了啦。
整个页面的代码如下：(还有其他一些知识) 是JSP页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>一级菜单树</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" target="_blank" rel="external nofollow" >
-->
<script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function() {
$("table tr").hover(function() {
$(this).css("background-color", "#B2E1F1");
}, function() {
$(this).css("background-color", "");
});
});
function changeColor(a) {
for ( var i = 1; i <= 14; i++) {
document.getElementById("menu" + i).className = "Normal";
}
document.getElementById("menu" + a).className = "Current";
}
</script>
<style type="text/css">
body{
MARGIN-TOP: 2px;
MARGIN-LEFT: 2px;
margin-right: 2px;
margin-bottom: 2px;
FONT-FAMILY: verdana;
FONT-SIZE: 14px;
}
table{
border-collapse:collapse;
}
tr{
background-color: #F0F5FF;
cursor: pointer;
FONT-FAMILY: verdana;
FONT-SIZE: 14px;
}
td{
PADDING-LEFT: 10px;
border:solid 1px #719BC3;
}
a{
color: black;
outline: none; /*去掉超级链接的虚线框*/
}
a:link,a:visited{ text-decoration:none; /*超链接无下划线*/ }
a:hover{ text-decoration:underline; /*鼠标放上去有下划线*/}
a:active {star:expression(this.onFocus=this.blur()); /*去掉超级链接的虚线框*/}
.Normal{background:none;}
.Current{background: #B2E1F1;}
</style>
</head>
<body>
<table width='100%' height='100%' cellspacing='0' cellpadding='1'><tr id='menu1'><td><a href='getnexttree.action?id=1' target='menuTree' οnclick='changeColor(1)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/1.gif' /> 我的流程</a></td></tr><tr id='menu2'><td><a href='getnexttree.action?id=2' target='menuTree' οnclick='changeColor(2)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/2.gif' /> 我的文档</a></td></tr><tr id='menu3'><td><a href='getnexttree.action?id=3' target='menuTree' οnclick='changeColor(3)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/3.gif' /> 我的通信</a></td></tr><tr id='menu4'><td><a href='getnexttree.action?id=4' target='menuTree' οnclick='changeColor(4)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/4.gif' /> 我的人事</a></td></tr><tr id='menu5'><td><a href='getnexttree.action?id=5' target='menuTree' οnclick='changeColor(5)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/5.gif' /> 我的任务</a></td></tr><tr id='menu6'><td><a href='getnexttree.action?id=6' target='menuTree' οnclick='changeColor(6)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/6.gif' /> 我的资产</a></td></tr><tr id='menu7'><td><a href='getnexttree.action?id=7' target='menuTree' οnclick='changeColor(7)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/7.gif' /> 我的会议</a></td></tr><tr id='menu8'><td><a href='getnexttree.action?id=8' target='menuTree' οnclick='changeColor(8)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/8.gif' /> 我的商务</a></td></tr><tr id='menu9'><td><a href='getnexttree.action?id=9' target='menuTree' οnclick='changeColor(9)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/9.gif' /> 我的助手</a></td></tr><tr id='menu10'><td><a href='getnexttree.action?id=10' target='menuTree' οnclick='changeColor(10)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/10.gif' /> 信息中心</a></td></tr><tr id='menu11'><td><a href='getnexttree.action?id=11' target='menuTree' οnclick='changeColor(11)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/11.gif' /> 系统管理</a></td></tr><tr id='menu12'><td><a href='getnexttree.action?id=12' target='menuTree' οnclick='changeColor(12)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/12.gif' /> 图形报表</a></td></tr><tr id='menu13'><td><a href='getnexttree.action?id=13' target='menuTree' οnclick='changeColor(13)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/13.gif' /> 我的协作</a></td></tr><tr id='menu14'><td><a href='getnexttree.action?id=14' target='menuTree' οnclick='changeColor(14)'><img align='middle' src='index_files/leftMenuFiles/mainMenuInco/14.gif' /> 我的相册</a></td></tr></table>
</body>
</html>