|
以下是代码片段:
<title>鼠标经过效果</title> </head>
<body> <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: 1px; 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: 55px; /*position where enlarged image should offset horizontally */
}
</style> <a class="thumbnail" href=链接>请看这是生梨 <span><img src="http://www.16ox.com/userlist/admin/data/userpic/s050910185151.jpg" width="210" border="0"></span></a> <BR><BR><BR> <a class="thumbnail" href=链接>请看这是草莓 <span><img src="http://www.16ox.com/userlist/admin/data/userpic/s050910184936.jpg" width="210" border="0"></span></a> <BR><BR><BR> <a class="thumbnail" href=链接>请看这是青椒 <span><img src="http://www.16ox.com/userlist/admin/data/userpic/s050910185914.jpg" width="210" border="0"></span></a> <BR><BR><BR> <a class="thumbnail" href=链接>请看这是卷心菜 <span><img src="http://www.16ox.com/userlist/admin/data/userpic/s050910190141.jpg" width="210" border="0"></span></a>
</body> </html>
|