CSS的”弹出式“图像浏览器
转自Dynamic Drive，纯CSS的，原理就是在a标记里面放两张图片，一张大图，一张小图，正常情况下小图可见，大图隐藏，a:hover就显示大图了
以下是引用片段：
<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>
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg" /><br />Simply beautiful.</span></a>
<a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
- 推荐阅讯
- CSS入门教程之CSS的语法
- 简单实用的网页表格特效
- 网页特效：用CSS实现的一个字符显示效果
- 避免表格table被撑开变形的CSS
- 分析总结一下＜li＞和＜hr＞的样式定义
- 超级漂亮的表格:彩色背景
- 推荐几组漂亮的按纽CSS（名字自己定义）
- 对display:inline;与float:left;的认识
- CSS布局中自适应高度的解决方法
- 用tabIndex轻松实现网页导航
- 阅读排行
- 1.如何使用CSS来进行网页排版
- 2.CSS样式表教程-If you love css …
- 3.CSS用样式表美化你的网页
- 4.网页制作：几种所见所得的WEB在线编辑器
- 5.网页常见可用性错误——表单组件错误
- 6.CSS+JavaScript打造超酷右键菜单
- 7.针对浏览器隐藏CSS之九大技巧
- 8.DIV＋CSS网页布局入门
- 9.搜索引擎的蜘蛛人（ROBOTS）秘密
- 10.CSS垂直树形下拉菜单
- 专题教程
- Windows Server-Windows Server文档-Windows Server新闻-Windows Ser PostgreSQL-PostgreSQL文档-PostgreSQL新闻-PostgreSQL专家
- WebLogic-WebLogic文档-WebLogic新闻-WebLogic专家 FreeBSD-FreeBSD文档-FreeBSD新闻-FreeBSD专家
- Linux-内核 GUI KDE Gnome DNS FTP 安全 安装-Linux专区 Windows-AD IIS ServerCore 虚拟化 安全 HPC-Windows专区
- 大话G游 专题：手机病毒揭密
- ARP攻击防范与解决方案 路由故障处理手册