首頁  >  文章  >  web前端  >  滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現? (例)

滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現? (例)

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

我們在進行網站設計時,如果遇到要求當滑鼠移入移出某張圖片時,要自動覆寫另一張圖片,該如何去操作呢?其實稍微懂得一些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來實現? (例)

2、css滑鼠移入顯示則是覆寫了另一張:

滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現? (例)

其實本篇文章介紹的關鍵就是利用hover偽類。這裡也跟大家簡單介紹下css:hover的定義和用法。

:hover 偽類別是在滑鼠移到元素上時向此元素新增特殊的樣式。這個偽類應用程式處於「懸停狀態」的元素。懸停定義為使用者指示了一個元素但沒有將其啟動。對此最常見的例子是將滑鼠指標移到 HTML 文件中一個超連結的邊界範圍內。理論上,其他元素也可以處於懸停狀態,不過 CSS 沒有定義究竟是哪些元素。

附註:所有主流瀏覽器都支援 :hover 偽類。

希望這篇文章對有需要的朋友有幫助!


以上是滑鼠移入移出時覆蓋另一張圖片怎麼用css來實現? (例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn