js hover鼠标滑过标签背景高亮显示特效代码下载


js hover鼠标滑过标签背景高亮显示特效代码下载
js hover鼠标滑过标签背景高亮显示特效代码下载以及鼠标滑过标签、背景高亮显示等js/jquery网页特效代码下载。

1. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
img{vertical-align:middle;}
body{font-size:12px;font-family:"宋体",Arial, Helvetica, sans-serif;}
/* mylist */
.mylist{width:400px;margin:50px auto;}
.mylist ul li{border-bottom:#6AA70B 1px dotted;height:32px;line-height:32px;overflow:hidden;padding:0 10px;}
.mylist ul li a{color:#333;text-decoration:none;}
.mylist ul li a:hover{color:#3366cc;text-decoration:underline;}
.mylist ul li.odd{background-color:#EFFEDD;}/* 第一行的背景色 */
.mylist ul li.even{background-color:#eee;}/* 第二行的背景色 */
.mylist ul li.hover{background-color:#D2FCA0;}/* 鼠标经过时的背景色 */
</style>
<div class="mylist" id="tab">
	<ul>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul>
</div>
<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)?"odd":"even"; 
	}
}
window.onload=$;
for(var i=0;i<Ptr.length;i++){
	Ptr[i].onmouseover=function(){
		this.tmpClass=this.className;
		this.className = "hover";    
	};
	Ptr[i].onmouseout=function(){
		this.className=this.tmpClass;
	};
}
</script>

相关推荐

发表评论

相关文章