简明现代魔法 -> 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>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们