用css实现链接经过时显示浮动图片背景的效果

转载 2007年09月27日 16:58:00

用css实现链接经过时显示浮动图片背景的效果 

顾名思义,就是鼠标放到链接上时显示浮动的图片,只不过这个图片是背景图片,还是先来看一下演示比较直观:attachment/qing/hover_back...
  怎么样,效果还不错吧,可以应用在多种场合,关键是完全用css实现,没有用到javascript,代码看起来也非常清晰易懂,下面来和大家分析一下具体代码.

xHTML:

<dl class="piclist">
<dt>小晴的图片</dt>
<dd><a href="#">阳伞下<b class="mn1"></b></a></dd>
... ...
</dl>


  html代码中没有什么特别的地方,就是链接而已,只不过是在链接里添加了<b>标签,其实用<span>会更好一点,不过实现的功能是一样的.

CSS:
dd a { position:relative;}
dd a b {visibility:hidden; position:absolute; width:141px; height:150px; left:100px; top:-10px; z-index:1000;}
dd a:hover {background:#fff; z-index:1000;}
dd a:hover b {visibility:visible;}
b.mn1 { background: #FFF url(thumbs/tn_qing-1.jpg) no-repeat center center;}
... ...


  在css代码中就体现出<b>标签的功用了,首先dd a的样式是相对定位,而dd a b的样式是隐藏的并且是绝对定位,宽和高和图片的宽和高是对应的,这时候的left和top属性是相对于父元素(也就是 dd a的),z轴设为1000是为了使图片浮动在最上层,这样就实现了背景图片的不可见以及相对于链接文字的位置;接下来当鼠标移动到链接上时,使背景图片可见就ok了,怎么样,是不是很简单呢.

                                                                                      来源:不明

举报

相关文章推荐

js实现图片浮动的效果

利用js中的window对象,实现的一个图片浮动的效果   思路:首先要有一个div来供图片使用,这个div将成为我们控制图片的区域,它在网页中的起始坐标为(0,0);        其次,我们要...

TextView特效

TextView 特效1实现文字滚动效果的实现 特效2自动链接效果的实现

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

NSIS 学习(1)——安装包打开后主界面显示背景图片(使用向导创建)

 var txt_LicensePage Var TopImage Var BGImage Var ImageHandle ; 该脚本使用 HM VNISEdit 脚本编...

CSS实现(伪)背景图片压缩百分百显示。

先说下情况,最近帮公司做了一个登录页,由于是自己做,想做的多一点,比如说,浏览器缩放的时候能按比例显示,footer 能根据不同的显示器固定到底部 等等。 当然先做的越多遇到的问题就越多,比如说如果...

CSS实现特殊背景效果

CSS3的出现使得一些以前需要用图片的背景效果也可以直接用CSS实现,今天分享一下三个用CSS3做的特殊背景。这三个例子都使用到了CSS3的线性渐变。下面以webkit引擎下的线性gradient用法...

ANDROID-漂浮背景效果

在背景中漂浮任意视图,添加不同的图形可以组成各种效果,目前已经用在我们项目的注册界面~

css 实现图片动态效果

使用方法 利用hover伪类 操作流程 首先确定要实现的效果 设置初始表示状态 动画用到的css属性 transition 属性 transition-property 规定设置过渡效...

POI实现excell批注背景图片(仿html浮窗显示图片)

公司客户需要从系统中导出一些带图片的excel报表,因为图片的大小不固定,所以如果直接放在excel中会导致严重变形。公司的客服说以前有个客户发给她这样一个excel表格,在excel中显示小图片,鼠...

cocos2d-x 3.2 |如何实现图片显示和精灵动画 Sprite

cocos2d-x 3.2 |如何实现图片显示和精灵动画 Sprite

安卓canvas实现拖动显示大背景图片

最近做的项目中有这样的需求: 一张很大的背景图,用户通过拖动来查看背景图的不同区域;背景图上还有小图片,也需要在背景图滑动的同时跟着一起动。 我一开始想,这还不好做嘛,直接把用ImageView控件...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)