中财网陌陌消息怎么全部删除:纯css RollOver 效果
来源：百度文库 编辑：中财网 时间：2024/05/05 11:18:51
本文档改编自http://www.meyerweb.com/eric/css/edge/popups/demo.html.原文较长。我简化了一下，并且把rolloverimg的效果合并在一个文档中。只用来说明用纯css实现rollover的效果（见左侧的导航条）。原文是用了popups的字眼。我所理解的popup一般表示弹出框，跟此处的效果不符，故改成rollover来表述。
延伸思考:这种pure csspopup效果的通用性如何？是否同时实现了机器（搜索引擎）友好和对人友好呢？要如何实现图文混排的rollover效果，请各位自己琢磨了。
Hands-on: 实现
看看左侧的mouse rollover效果就可以了。
申明: no 不需要任何javascript就可以实现。
如何实现!
这里, 说明文字，都被放在了span标签中。比如这样:
为了防止说明文字在载入页面的时候就被显示:
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 mouserollover实现变成了图片形式。
初始定义
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想为用户多节约一点带宽，:)