有選中隔行變色鼠標劃過變色表格特效 li.t1 {background-color:#fff;}/* 交替行第一行的背景色 */ li.t2 {background-color:#eee;}/* 交替行第二行的背景色 */ li.t3 {background-color:#ccc;}/* 鼠標經過時的背景色 */ http://www.baidu.com szzdc@163.com http://www.baidu.com szzdc@163.com http://www.baidu.com szzdc@163.com 代碼如下： <!DOCTYPE HTML>
<html>
<head>
<meta charset="gbk" />
<title>有選中隔行變色鼠標劃過變色表格特效</title>
<style type="text/css">
li.t1 {background-color:#fff;}/* 交替行第一行的背景色 */
li.t2 {background-color:#eee;}/* 交替行第二行的背景色 */
li.t3 {background-color:#ccc;}/* 鼠標經過時的背景色 */
</style>
</head>
<body>
<ul id="tab">
<li>http://www.baidu.com</li>
<li>szzdc@163.com</li>
<li>http://www.baidu.com</li>
<li>szzdc@163.com</li>
<li>http://www.baidu.com</li>
<li>szzdc@163.com</li>
</ul>
<script type="text/javascript">
<!--
var Ptr=document.getElementById("tab").getElementsByTagName("li");
function $() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
//-->
</script>
</body>
</html>