如上網頁效果用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實現了能夠相容的如本文開頭的網頁動態效果！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
