简明现代魔法 -> CSS层叠样式表 -> 鼠标移到链接弹出图片的效果
鼠标移到链接弹出图片的效果
2010-04-29
效果演示
鼠标移上去可以看到图片
CSS Code
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<style type="text/css">
<!--
.thumbnail{ position:relative; z-index:0; }
.thumbnail:hover{ background-color:transparent; z-index:50; }
.thumbnail span{ position:absolute; background-color:#FFFFE0; left:-1000px;border:1px dashed gray; visibility:hidden; color:#000; text-decoration:none; padding:5px; }
.thumbnail span img{ border-width:0; padding:2px; }
.thumbnail:hover span{ visibility:visible; top:10px; left:280px; }
p{ margin-top:200px; }
-->
</style>
<a class="thumbnail" href="#">
点击可以看到图片<br>
<span><img src=" http://www.nowamagic.net/images/1.jpg "></span></a>
</body>
</html>