javascript鼠标滑过标题列表显示说明和图片的效果

作者：简简单单 2012-07-14

提示：您可以先修改部分代码再运行

*{margin:0;padding:0;font:normal 12px 宋体;}
.wrapper{height:auto;overflow:hidden;border:1px solid #fdd78d;background:#ffecc6;padding:5px;}
/*平常的状态*/
dl{width:100%;height:auto;clear:both;overflow:hidden;margin:8px 0px 8px 0px;}
dl dt{display:none;}
dl dd{}
dl dd strong{float:left;margin-right:5px;}
dl dd div{float:left;list-style-type:none;}
dl dd div h4{clear:both;font-weight:normal}
dl dd div h4 a{float:left;color:#795601;font-size:12px;font-weight:normal;text-decoration:none;}
dl dd div h4 a:hover{color:#f00;text-decoration:underline;}
dl dd div h4 span{float:right;}
dl dd div p{display:none;}
/*鼠标划过的状态*/
dl.over{clear:both;padding:5px;background-color: #FFFBF4;}
dl.over dt{float:right;display:block;}
dl.over dt img{border:1px solid #ccc;padding:1px;background:#fff;}
dl.over dd{float:left;}
dl.over dd strong{font-size:28px;color:red;vertical-align:top;}
dl.over dd div{float:left;}
dl.over dd div h4{clear:both;font-weight:normal}
dl.over dd div h4 a{color:#b34408;}
dl.over dd div h4 a:hover{color:#f00;text-decoration:underline;}
dl.over dd div h4 span{float:right;}
dl.over dd div p{clear:both;display:block;margin-top:5px;}</style></p>
<script language="javascript">
window.onload=function(){
	var dl=document.getElementsByTagName("dl");
	if(dl.length<1) return false;
	for(var i=0;i<dl.length;i++){
		//初始化，让第一个类为over
		if(dl[i].className.indexOf("over")==-1){
			dl[0].className="over";
		}
		//遍历循环，模拟:hover伪类
		dl[i].onmouseover=function(){
			for(var j=0;j<dl.length;j++){
				dl[j].className="";
			}
			this.className="over";
		}
	}
}
</script>
<div class="wrapper"><dl><dt><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><img  alt="" src="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" /></a></a></a></a></a></a> </dt><dd><strong>01</strong>
<div>
<h4><span>人气：19045</span><a href="#">酷站展示</a></h4>
<p>网罗网络最新<a href="http://www.111com.net/flash_a/flash.html" target="_blank">flash</a>动画、素材</p>
</div>
</dd></dl><dl><dt><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><img  alt="" src="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" /></a></a></a></a></a></a> </dt><dd><strong>02</strong>
<div>
<h4><span>人气：34534</span><a href="#">视频教程</a></h4>
<p>网罗网络最新flash动画、素材</p>
</div>
</dd></dl><dl><dt><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><img  alt="" src="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" /></a></a></a></a></a></a> </dt><dd><strong>03</strong>
<div>
<h4><span>人气：79789</span><a href="#">loading素材</a></h4>
<p>网罗网络最新flash动画、素材</p>
</div>
</dd></dl><dl><dt><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><img  alt="" src="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" /></a></a></a></a></a></a> </dt><dd><strong>04</strong>
<div>
<h4><span>人气：4323</span><a href="#">flash片头</a></h4>
<p>网罗网络最新flash动画、素材</p>
</div>
</dd></dl><dl><dt><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><img  alt="" src="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" /></a></a></a></a></a></a> </dt><dd><strong>05</strong>
<div>
<h4><a href="#">flash动画</a><span>人气：6456</span></h4>
<p>网罗网络最新flash动画、素材</p>
</div>
</dd></dl><dl><dt><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><a href="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" class="js-smartPhoto" target="_blank"><img  alt="" src="https://img.111com.net/get_pic/2012/07/14/20120714011818840.jpg" /></a></a></a></a></a></a> </dt><dd><strong>06</strong>
<div>
<h4><span>人气：433534</span><a href="51xflash.com">flash素材</a></h4>
<p>网罗网络最新flash动画、素材</p>
</div>
</dd></dl></div></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

javascript鼠标滑过标题列表显示说明和图片的效果

相关文章

精彩推荐