鼠标滑过显示头像效果的文章列表_网页布局

鼠标滑过显示头像效果的文章列表: 发布时间：2020-11-19编辑：脚本学堂

一种带图片功能的文章或新闻列表功能，鼠标滑过标题列表显示说明和图片，效果很酷。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标滑过标题列表显示说明和图片</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;font:normal 12px 宋体;}
.wrapper{width:300px;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;width:270px;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;width:75px;}
dl dd div p{display:none;}
/*鼠标划过的状态*/
dl.over{clear:both;height:55px;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;width:195px;}
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>
<script language="<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>">
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>
</head>
<body>
<div class="wrapper">
	<dl>
		<dt><img src="/source/images/201207/tp714_getface.jpg"></dt>
		<dd>
			<strong>01</strong>
			<div>
				<h4><span>人气：20012</span><a href="#"><a href=http://www.jb200.com/jb/ target=_blank class=infotextkey>脚本</a>编程</a></h4>
				<p>脚本编程，提供脚本编程相关文章</p> 
			</div>
		</dd>
	</dl>
	<dl>
		<dt><img src="/source/images/201207/tp714_getface.jpg"></dt>
		<dd>
			<strong>02</strong>
			<div>
				<h4><span>人气：23879</span><a href="#">网站编程</a></h4>
				<p>网站编程，尽在脚本学习网</p> 
			</div>
		</dd>
	</dl>
	<dl>
		<dt><img src="/source/images/201207/tp714_getface.jpg"></dt>
		<dd>
			<strong>03</strong>
			<div>
				<h4><span>人气：32807</span><a href="#">网页教程</a></h4>
				<p>这里是网页教程栏目</p> 
			</div>
		</dd>
	</dl>
	<dl>
		<dt><img src="/source/images/201207/tp714_getface.jpg"></dt>
		<dd>
			<strong>04</strong>
			<div>
				<h4><span>人气：32125</span><a href="#">网页特效</a></h4>
				<p>网页特效在线显示与代码收集</p> 
			</div>
		</dd>
	</dl>
	<dl>
		<dt><img src="/source/images/201207/tp714_getface.jpg"></dt>
		<dd>
			<strong>05</strong>
			<div>
				<h4><a href="#">系统管理</a><span>人气：89202</span></h4>
				<p>系统管理系列教程</p> 
			</div>
		</dd>
	</dl>
</div>
</body>
</html>

提示：可修改代码后再运行!

上一篇：始终悬停在顶端的菜单或区域
下一篇：有了jquery，简单3行代码即实现层的显示与隐藏

与鼠标滑过显示头像效果的文章列表有关的文章

本文标题：鼠标滑过显示头像效果的文章列表
本页链接：http://www.jb200.com/tx/15.html

浏览排行

栏目分类

热点文章

鼠标滑过显示头像效果的文章列表