首頁 >web前端 >css教學 >滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現？（例）

滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現？（例）

藏色散人原創: 2018-08-10 10:30:546287瀏覽

我們在進行網站設計時，如果遇到要求當滑鼠移入移出某張圖片時，要自動覆寫另一張圖片，該如何去操作呢？其實稍微懂得一些css程式碼的朋友都知道這是一個很簡單的操作。即便是新手小白，只要透過本篇文章介紹，都能夠輕易得了解其中知識點。那麼今天我為大家詳細的介紹css滑鼠經過樣式中覆蓋某張圖片的特效功能。

css滑鼠移入移出覆蓋另一張圖片的具體程式碼範例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css鼠标经过样式测试</title>
</head>
<body>
<div class="div">
    <div class="img1 img">
        <img  src="1.png" alt="滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現？ （例）" >
    </div>
    <div class="img2 img">
        <img  src="2.png" alt="滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現？ （例）" >
    </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、剛開啟頁面顯示的是：

滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現？（例）