当前位置：迷你小窝窝/网页制作/Dreamweaver网页制作/CSS代码测试（鼠标经过显示大图）

CSS代码测试2（鼠标经过图像时大图紧接着在下方显示，经过文字时，大图沿文字上方开始显示），代码来源：http://www.dynamicdrive.com/style/
由于本例大图显示在右下方，建议小图放在左上方。

动画欣赏
动画欣赏
动画欣赏
动画欣赏
动画欣赏
动画欣赏

（图 7）
动画欣赏 （图 8）
动画欣赏 （图 9）
动画欣赏 （图10）
动画欣赏 （图11）
动画欣赏 （图12）
动画欣赏

CSS代码：

<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}
</style>

html代码：

<div>
<a class="thumbnail" href="#thumb"><img src="CSStestpicture/scenery1s.jpg" width="160" height="120" /><span><img src="CSStestpicture/scenery1.gif" /><br />动画欣赏</span></a>
<a class="thumbnail" href="#thumb"><img src="CSStestpicture/scenery2s.jpg" width="160" height="120" /><span><img src="CSStestpicture/scenery2.gif" /><br />动画欣赏</span></a><br />
<br />
<a class="thumbnail" href="#thumb">（图 7）<span><img src="CSStestpicture/scenery7.gif" /><br />动画欣赏</span></a>
<a class="thumbnail" href="#thumb">（图 8）<span><img src="CSStestpicture/scenery8.gif" /><br />动画欣赏</span><br />
</div>