本文檔改編自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標簽中。比如這樣:
<a>石頭札記<span>Promoterelationship between human and computer陳磊的blog</span></a>
為了防止說明文字在載入頁面的時候就被顯示:
div#links a span {display: none;}
就這樣, span部分就從頁面解析流中被完全提出了. 舉一反三，我們可以把 display 換成block 位置標簽等，把他們跟一個超鏈接的mouse rollover聯(lián)系起來. 下面兩行是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;}
另外定義了主導航按鈕本身的rollover效果，提高可用性:
div#links a:hover {color: #411; background: #AAA;border-right: 5px double white;}
為什么這里不用 display: none? 因為在Netscape 6.x,如果定義了display:none樣式后，圖片將不會被載入。也許Netscape想為用戶多節(jié)約一點帶寬，:)
