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"> </div> <div class="img2 img"> <img src="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、剛開啟頁面顯示的是：
2、css滑鼠移入顯示則是覆蓋了另一張：
其實本篇文章介紹的關鍵就是利用hover偽類。這裡也給大家簡單介紹下css:hover的定義和用法。
:hover 偽類是在滑鼠移到元素上時向此元素添加特殊的樣式。這個偽類應用處於“懸停狀態”的元素。懸停定義為使用者指示了一個元素但沒有將其啟用。對此最常見的例子是將滑鼠指標移到 HTML 文檔中一個超連結的邊界範圍內。理論上，其他元素也可以處於懸停狀態，不過 CSS 沒有定義究竟是哪些元素。
註：所有主流瀏覽器都支援 :hover 偽類。
希望本篇文章對有需要的朋友有所協助！
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
