纯css RollOver 效果

本文档改编自http://www./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./">石头札记<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想为用户多节约一点带宽，:)