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>

相关文章：

猜你喜欢

CSS+DIV实现图片动态显示(完美版) 2022-12-23
div css背景图片不显示 2022-02-07
CSS实现图片圆角显示 2022-12-23
采用CSS+div动态显示div标签 - sjdong 2021-11-05
c#实现显示图片的动态效果 2022-12-23
EXTJS4.0 显示图片动态图片 2021-07-02
纯css实现div同行显示 2021-06-04

相关资源

jQuery+css实现的点击图片在外围显示动态图片环绕效果下载 2023-02-19
HTML5 canvas实现动态显示的图片头像动画效果源码下载 2023-01-13
div+CSS3实现的30个鼠标经过悬停图片动画显示特效源码下载 2023-01-01
jQuery实现图片模糊显示特效源码下载 2022-12-31
基于jquery+css来实现鼠标滑过图片黑白显示的特效下载 2022-12-30

相似解决方案

热门标签

Java Python linux javascript Mysql C# Docker 算法前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库数据结构大数据 js 机器学习微服务 Android Go 程序员面试 JVM ASP.net core 云原生人工智能后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习多线程 React 架构 devops 爬虫云计算 Spring Boot LeetCode