东方雎的专栏

——为人生而艺术

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

用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了,怎么样,是不是很简单呢.

                                                                                      来源:不明

阅读更多
个人分类: C# 综合
想对作者说点什么? 我来说一句

浮动图片css实现

doublesmile doublesmile

2010-06-22 15:25:00

阅读数:180

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭