用hover配合position(純css)實現網頁動態效果

來源:互聯網
上載者:User

如上網頁效果用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實現了能夠相容的如本文開頭的網頁動態效果!

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。