CSS+DIV实现图片动态显示_CSS_网页制作_技术部落--打造最全面的IT技术网站

CSS+DIV实现图片动态显示

2008-6-18 来源：博客网编辑：Jsbulo 热度：

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

<!--

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 rgb(91,185,233);

background-color: rgb(228,246,255);

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

}

a img {

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

display:block;

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

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

left:5px;

}

-->

</style>

</head>

<body>

<a href="#" class="showImage">Photoshop打造章子怡相框<img id="img1" src="http://images.enet.com.cn/eschool/gdtup/tu6/787358127.jpg"></img></a> </body> </html>

技术部落，更多精彩内容尽在首页

【部落直达】【部落社区】【关闭】