CSS+DIV实现图片动态显示

 

< html  xmlns ="<a href=" http://www.w3.org/1999/xhtml" target ="_blank" >

< head >

< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />

< title > 图片动态显示 </ title >

< style  type ="text/css" >

<!--

a {}{

position: relative;/**//*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/

display:block;/**//*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/

}

a img{}{

display: none; visibility:hidden;/**//*初始化信息面板不显示*/

}

a:hover {}{background:#fff;}/**//*IE7以下版本A状态伪类bug*/

a:hover img {}{

display:block;

visibility:visible;

position: absolute;

padding:5px;

display:block;

width: 139px;/**//*只给出宽度，高让它随内容多少自动调整*/

left:50px;/**//*这是相对父级A的定位*/

top: 20px;

border: 1px solid #5bb9e9;

background-color: #e4f6ff;

z-index:999;/**//*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

}

a img {}{

border:none;/**//*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/

display:block;

position: absolute;/**//*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/

top:5px;/**//*这里的px是与信息面板大盒子的填充一样的*/

left:5px;

}

-->

</ style >

</ head >

< body >

< a  href ="#"  class ="showImage" > 雪景小屋 < img  id ="img1"  src ="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg" ></ img ></ a >

</ body >

</ html >

转载于:https://www.cnblogs.com/zhoufeng/archive/2008/06/16/1223355.html