用css制作分页时弄成鼠标滑过效果
时间：2010-05-26 来源：nvshdtb
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css Sprite</title>
<style type="text/css">
* {margin:0;padding:0;}
#Wrapper {width:100%;font-size:12px}
#Wrapper ul {list-style:none;text-align:center;}
#Wrapper ul li {display:inline-block;*display:inline;}
#Wrapper ul li a {display:inline-block;text-decoration:none;background:url(http://tu.gzse7en.com/upload_files/1271347560.gif) -5px -5px no-repeat;line-overflow:hidden;position:relative;padding:0 10px;color:#fff}
#Wrapper ul li a span {position:absolute;right:0;top:0;background:url(http://tu.gzse7en.com/upload_files/1271347560.gif) -95px -5px no-repeat;width:10px;overflow:hidden;}
#Wrapper ul li a:hover {background:url(http://tu.gzse7en.com/upload_files/1271347560.gif) -5px -30px no-repeat;}
#Wrapper ul li a:hover span {background:url(http://tu.gzse7en.com/upload_files/1271347560.gif) -95px -30px no-repeat;}
</style>
</head>
<body>
<div id="Wrapper">
<ul>
<li><a href="#">上一页<span></span></a></li>
<li><a href="#">1<span></span></a></li>
<li><a href="#">22<span></span></a></li>
<li><a href="#">333<span></span></a></li>
<li><a href="#">4444<span></span></a></li>
<li><a href="#">55555<span></span></a></li>
<li><a href="#">下一页<span></span></a></li>
</ul>
</div>
</body>
</html>
相关阅读 更多 +
