纯css RollOver 效果

本文档改编自http://www.meyerweb.com/eric/css/edge/popups/demo.html .原文较长。我简化了一下，并且把rollover img的效果合并在一个文档中。只用来说明用纯css实现rollover的效果（见左侧的导航条）。原文是用了popups的字眼。我所理解的popup一般表示弹出框，跟此处的效果不符，故改成rollover来表述。

延伸思考:这种pure css popup效果的通用性如何？是否同时实现了机器（搜索引擎）友好和对人友好呢？要如何实现图文混排的rollover效果，请各位自己琢磨了。

Hands-on: 实现

看看左侧的mouse rollover效果就可以了。

申明: no 不需要任何javascript就可以实现。

如何实现!

这里, 说明文字，都被放在了span标签中。比如这样:

<a href="http://tristones.viaspeip.com/">石头札记<span>Promote relationship between human and computer 陈磊的blog</span></a>

为了防止说明文字在载入页面的时候就被显示:

div#links a span {display: none;}

就这样, span部分就从页面解析流中被完全提出了. 举一反三，我们可以把 display 换成block 位置标签等，把他们跟一个超链接的mouse rollover联系起来. 下面两行是rollover效果定义的代码:

div#links a:hover span {display: block;
   position: absolute; top: 200px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 10px Verdana, sans-serif; text-align: center;}

另外下面的三行是其他基本样式, 而第一行变换了display定义的样式才是关键所在 (display: block;) ，这样即可把说明文字显示出来并放在正确的位置。

扩展这个引用，可以有更有趣的表现。我可以可以把说明文字改成图片。我已经把VIASP的link mouse rollover实现变成了图片形式。

初始定义

div#links a img {height: 0; width: 0; border-width: 0;}

rollover 定义

div#links a:hover img {position: absolute; top: 190px; left: 40px; height: 127px; width: 100px;}

A Minor Side Note

另外定义了主导航按钮本身的rollover效果，提高可用性:

div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}

为什么这里不用 display: none? 因为在Netscape 6.x, 如果定义了display:none样式后，图片将不会被载入。也许Netscape想为用户多节约一点带宽，:)