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

                                                                                      来源:不明

相关文章推荐

CSS基础实例:CSS实现带背景图片的文字链接的方法

   在论坛闲逛,遇到一个朋友提出了一个关于“CSS实现带背景图片的文字链接”的问题。   经典论坛贴子原文如下:   我想做成第一种图片的效果。可是按我自己的代码写下来就成了第二种效果,字有多大背景...

30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari ...

CSS 鼠标经过图片效果合集

  • 2015年05月11日 14:45
  • 88KB
  • 下载

【前端】CSS实现背景图片透明和文字不透明效果

项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .d...
  • hj7jay
  • hj7jay
  • 2017年06月20日 09:57
  • 1141

DIV CSS鼠标经过悬停在图片上时图片上方显示文字

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现。CSS实现鼠标悬停放图片上方时显示美化内容。 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用css实现链接经过时显示浮动图片背景的效果
举报原因:
原因补充:

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