|
顾名思义，就是鼠标放到链接上时显示浮动的图片，只不过这个图片是背景图片，还是先来看一下演示比较直观：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了，怎么样，是不是很简单呢．
|
