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

                                                                                      来源:不明

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

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现。CSS实现鼠标悬停放图片上方时显示美化内容。 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背...
  • u014243408
  • u014243408
  • 2014年03月20日 14:41
  • 1679

html+css鼠标悬浮显示图片

初学html,在这里留下足迹。如有谬误,请多指教。 主要步骤:1、将对应的大图小图存放在同一个li标签中(鼠标悬浮到小图时,方便定位到大图)。 2、内部样式中利用...
  • qingbaicai
  • qingbaicai
  • 2016年08月13日 17:31
  • 9659

纯css3实现图片自动切换

实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。 大致思路是这样的: 1、将图片设置为li的背景图片; 2、规定一个@keyframes的规则使得图片按照这个规则进行切换; 3...
  • HL141916
  • HL141916
  • 2017年05月25日 20:44
  • 1573

css+js实现鼠标经过图片后,图片变背景图,显示新内容

  • 2016年12月27日 10:19
  • 70KB
  • 下载

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

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

【Jquery经典特效16】jQuery鼠标经过图片背景滑动切换效果

  • 2015年04月23日 10:49
  • 67KB
  • 下载

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

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

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

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

CSS 鼠标经过图片效果合集

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

很酷的六种CSS 鼠标经过图片效果(含HTML文件)

  • 2014年11月26日 09:43
  • 97KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用css实现链接经过时显示浮动图片背景的效果
举报原因:
原因补充:

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