鼠标移入移出时覆盖另一张图片怎么用css来实现？（示例）-css教程-PHP中文网

鼠标移入移出时覆盖另一张图片怎么用css来实现？（示例）

藏色散人

发布： 2018-08-10 10:30:54

原创

6240 人浏览过

我们在进行网站设计时，如果遇到要求当鼠标移入移出某张图片时，要自动覆盖另一张图片，该如何去操作呢？其实稍微懂得一些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">
    </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、刚打开页面显示的是：