如上網頁效果用js很容易實現，但用純css實現此動態功能，意在加深對hover和position定位的理解。與大家分享，歡迎指正。
可以看到，這種效果底層是a標簽，hover狀態中憑空彈出一個解釋框，我們稱為元素2。那么要想讓元素2實現彈出效果而且不影響底層a標簽的排布，顯然應該用相對定位。因此確立了hover配合position的基本方法。我們以a標簽為相對定位的基准，代碼如下：
css
a{ display:block; height:30px; width:30px; background-color:green; float:left; margin-left:10px; position:relative; } a span{ display:hidden; } a:hover{ background-color:red; } a:hover span{ width:100px; height:50px; background-color:yellow; display:block; position:absolute; left:35px; top:5px; }
html
<body> <a href="###"><span></span></a> <a href="###"><span></span></a> <a href="###"><span></span></a> </body>
實現的效果如下圖所示（黃色span為元素2，綠色為a標簽，a標簽hover時為紅色）：
可以看到，hover加position定位實現了彈出解釋框的效果。但顯然這不是我們想要的效果，關鍵在於如何使元素2覆蓋到a標簽上面來。在現代瀏覽器中很簡單，我們給span設置z-index屬性便可：
a:hover span{z-index:1;}
現代瀏覽器中實現效果如下：
這便是我們想要的效果，但是在ie6中…
可以看到萬惡的ie6又不兼容了，顯然z- index沒有起作用，那么怎么才能讓元素2覆蓋a標簽呢，經過大量實驗我發現，元素2用來定位的基准標簽的兄弟標簽是會覆蓋元素2的。例如上圖，第三個 a標簽覆蓋了元素2，是因為元素2是以第二個a標簽為基准定位的。找到原因，那么解決這個兼容問題也很容易，只需在a標簽內再嵌套一個標 簽<em>，我們讓元素2以<em>為基准定位，就會發現a標簽不能再覆蓋元素2了（雖然<em>還是會覆蓋元素 2，但em是空標簽，而且可以設為隱藏，因此無影響）。代碼如下：
css
a{ display:block; height:30px; width:30px; background-color:green; float:left; margin-left:10px; } a em{ display:block; height:30px; width:30px; position:relative; } a span{ display:hidden; } a:hover{ background-color:red; } a:hover span{ width:100px; height:50px; background-color:yellow; display:block; position:absolute; left:35px; top:5px; z-index:1; }
html
<body> <a href="###"><em><span></span></em></a> <a href="###"><em><span></span></em></a> <a href="###"><em><span></span></em></a> </body>
這樣在ie6中也能完美運行了，最終通過純css實現了能夠兼容的如本文開頭的網頁動態效果！