如上網頁效果用js很容易實現，但用純css實現此動態功能，意在加深對hover和position定位的理解。與大家分享，歡迎指正。
可以看到，這種效果底層是a標簽，hover狀態中憑空彈出一個解釋框，我們稱為元素2。那么要想讓元素2實現彈出效果而且不影響底層a標簽的排布，顯然應該用相對定位。因此確立了hover配合position的基本方法。我們以a標簽為相對定位的基準，代碼如下：
css
可以看到，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
