下面是通過(guò)CSS鼠標(biāo)移入移出時(shí)交替顯示不同圖片的實(shí)例教程的相關(guān)內(nèi)容，文章教程主要講述與鼠標(biāo) 交替顯示 相關(guān)的一些技術(shù)與知識(shí)，更多的內(nèi)容歡迎大家訪(fǎng)問(wèn)http://www.survivalescaperooms.com,獲取更多最新教程,下面是教程講解：
我們?cè)谶M(jìn)行網(wǎng)站設(shè)計(jì)時(shí)，如果遇到要求當(dāng)鼠標(biāo)移入移出某張圖片時(shí)，要自動(dòng)覆蓋另一張圖片，該如何去操作呢？其實(shí)稍微懂得一些css代碼的朋友都知道這是一個(gè)非常簡(jiǎn)單的操作。即便是新手小白，只要通過(guò)本篇文章介紹，都能夠輕而易舉得了解其中知識(shí)點(diǎn)。那么今天我為大家詳細(xì)的介紹css鼠標(biāo)經(jīng)過(guò)樣式中覆蓋某張圖片的特效功能。
css鼠標(biāo)移入移出覆蓋另一張圖片的具體代碼示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css鼠標(biāo)經(jīng)過(guò)樣式測(cè)試</title></head><body><div class="div"> <div class="img1 img"> <img src=http://www.php.cn/"1.png"> </div> <div class="img2 img"> <img src=http://www.php.cn/"2.png"> </div></div><style> .div{position:relative; width:800px; margin:auto;} .img{position:absolute; z-index:0;} .img2{left:150px; top:100px;} .img1:hover{z-index:1;}</style></body></html>以上效果如下圖：
1、剛打開(kāi)頁(yè)面顯示的是：
2、css鼠標(biāo)移入顯示則是覆蓋了另一張.
其實(shí)本篇文章介紹的關(guān)鍵就是利用hover偽類(lèi)。這里也給大家簡(jiǎn)單介紹下css:hover的定義和用法。
:hover 偽類(lèi)是在鼠標(biāo)移到元素上時(shí)向此元素添加特殊的樣式。這個(gè)偽類(lèi)應(yīng)用處于“懸停狀態(tài)”的元素。懸停定義為用戶(hù)指示了一個(gè)元素但沒(méi)有將其激活。對(duì)此最常見(jiàn)的例子是將鼠標(biāo)指針移到 HTML 文檔中一個(gè)超鏈接的邊界范圍內(nèi)。理論上，其他元素也可以處于懸停狀態(tài)，不過(guò) CSS 沒(méi)有定義究竟是哪些元素。
注：所有主流瀏覽器都支持 :hover 偽類(lèi)。
希望本篇文章對(duì)有需要的朋友有所幫助！
以上就是鼠標(biāo)移入移出時(shí)覆蓋另一張圖片怎么用css來(lái)實(shí)現(xiàn)？（示例）的詳細(xì)內(nèi)容
通過(guò)CSS鼠標(biāo)移入移出時(shí)交替顯示不同圖片的實(shí)例教程文章就講到這里，歡迎瀏覽本站的其它內(nèi)容，點(diǎn)擊這里返回首頁(yè)
新聞熱點(diǎn)
疑難解答
圖片精選
