添加时间：2009-12-08 14:49
经常会看见一些图片展示的效果是当鼠标经过图片会出现这个图片的大图，如何用用css实现缩略图鼠标移上去显示大图的效果呢？请看以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标移上去显示大图</title>
<style type="text/css">
<!--
.pr {
position:relative;
}
.pr a {border:1px solid gray;width:200px;height:153px;font-size:12px;text-decoration:none;background:url("no.gif");position:absolute;left:0;top:0;z-index:2;text-indent:-9999px;padding:3px;}
.pr a:hover {width:10px;height:363px;text-indent:0;background:#fff url("http://www.85flash.com/Files/BeyondPic/2006-1/8/061819573345943.jpg") no-repeat 35px 3px;padding:10px 495px 0 10px;}
.pr img {border:1px solid gray;width:200px;position:relative;z-index:1;padding:3px;}
.pr2 a {display:block;width:206px;}
.pr2 a img {border:1px solid gray;width:200px;padding:3px;}
.pr2 a:hover {border:1px solid gray;width:200px;height:369px;font-size:12px;text-decoration:none;text-indent:0;background:#fff url("http://www.85flash.com/Files/BeyondPic/2006-1/8/061819573345943.jpg") no-repeat 206px 3px;padding:3px 485px 0 3px;}
.pr2 a:hover img {border:none;padding:0;}
-->
</style>
</head>
<body>
<div class="pr">
<img src="http://www.85flash.com/Files/BeyondPic/2006-1/8/061819573345943.jpg" alt="big" />
<a href="#">效果一</a>
</div>
<div class="pr2">
<a href="#"><img src="http://www.85flash.com/Files/BeyondPic/2006-1/8/061819573345943.jpg" alt="效果二" /></a>
</div>
</body>
</html>