[JavaScript] 列表鼠标HOVER切换效果

.module.cl.xl ul li span{
display: inline-block;
width: 18px;
text-align: center;
border: 1px solid #ccc;
color: #FF001E;
font-weight: 600;
margin-right: 5px;
}
.xl li {
margin: 0;
}
.slidebar{
bottom:5px!important;
left:10px!important;
}
.cl.xld dd{
float:left;
display:none;
margin:0;
}
.cl.xld dd img{
width:80px;
height: 70px;
}
#picList li.hover dd ,#picList li.hover hr{
display:block;
}
#picList li hr{
display:none;
}
.cl.xld dd:nth-child(3){
width: 200px;
margin: 5px;
line-height: 20px;
}
.slidebar li {
float: left;
margin-right: 1px;
padding:2px;
width: 116px;
height: 70px;
line-height: 20px;
text-align: center;
font-size: 10px;
cursor: pointer;
}
.slidebar li img{
width:100%;
height:100%;
opacity:0.3;
}
.slidebar li.on{
border:2px solid #fff;
padding:0;
}
.slidebar li.on img{
opacity:1;
}

<div class="module cl xl">
<ul id="picList">
<li>
	<dl class="cl xld">
		<dt><span>1</span><em>02-13</em><a href="#" title="这里是列表">这里是列表</a></dt>
		<dd><img src="image/s.jpg" width="80" height="70" /></dd><dd>这里是简介内容一二三四五六七八九</dd>
	</dl> 
	<hr class="da" />
</li>
<li>
	<dl class="cl xld">
		<dt><span>1</span><em>02-13</em><a href="#" title="这里是列表">这里是列表</a></dt>
		<dd><img src="image/s.jpg" width="80" height="70" /></dd><dd>这里是简介内容一二三四五六七八九</dd>
	</dl> 
	<hr class="da" />
</li>
</ul>
</div>

	var lis=picList.getElementsByTagName("li");
	for (var i=0;i<lis.length ;i++ )
	{	lis[0].className="hover";
		lis[i].onmouseover=function(){
			for (var n=0;n<lis.length ;n++ )
			{
				lis[n].className="";
			}
			if(this.className==""){
				this.className="hover";
			}
		}
	}