html部分
<div class="wrap";
<ul>
<li>
<a href="#">
<img src="01.jpg" alt="" class="small">
<img src="01.jpg" alt="" class="big">
</a>
</li>
</ul?
</div>
css样式表
.wrap{
width: 620px;
margin: 20px auto;
}
img{
vertical-align: middle;
}
.big{
display: none;
position: absolute;
left: -44px;
top: -31.5px;
padding: 2px;
background: #fff;
border: 1px solid #000;
/*opacity: 0.5; 透明度 */
z-index: 9;
}
.small{
width: 100px;
height:75px;
}
.wrap ul li{
float: left;
padding: 5px;
background: #eeeeee;
border-style: solid;
border-width: 1px;
border-color: #ddd #bbb #aaa #ccc;
position: relative;
margin: 3px;
}
.wrap ul li a{
display: block;
width: 100px;
height: 75px;
padding: 2px;
background: #fff;
border-style: solid;
border-width: 1px;
border-color: #aaa #ccc #ddd #bbb;
}
.wrap ul li a:hover .big{
display: block;
}