0
点赞
收藏
分享

微信扫一扫

移入显示第二张图片移出显示第一张图片

归零者245号 2022-01-20 阅读 70
css3csshtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hov{
            width: 200px;
            height: 200px;
            position: relative;
            float: left;
            overflow: hidden;
        }
        .hov_img img{
            position: relative;
            width: 200px;
            height: 200px;
            top: 0;
            left: 0;

        }
        .hov_text{
            position: relative;
            top: -110px;
            left: 20px;
            color: white;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div>
    <div class="hov">
        <div class="hov_img"><img src="https://img0.baidu.com/it/u=1929941019,3324507395&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="" style="background: royalblue"></div>
        <div class="hov_img"><img src="https://img1.baidu.com/it/u=2508655896,2142007349&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" style="background: pink">
            <div class="hov_text">
                <h2>name</h2>
                <p>tel</p>
                <p>address</p>
            </div>
        </div>
    </div>
    <div class="hov">
        <div class="hov_img"><img src="https://img0.baidu.com/it/u=1929941019,3324507395&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="" style="background: royalblue"></div>
        <div class="hov_img"><img src="https://img1.baidu.com/it/u=2508655896,2142007349&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" style="background: pink">
            <div class="hov_text">
                <h2>name</h2>
                <p>tel</p>
                <p>address</p>
            </div>
        </div>
    </div>
    <div class="hov">
        <div class="hov_img"><img src="https://img0.baidu.com/it/u=1929941019,3324507395&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="" style="background: royalblue"></div>
        <div class="hov_img"><img src="https://img1.baidu.com/it/u=2508655896,2142007349&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" style="background: pink">
            <div class="hov_text">
                <h2>name</h2>
                <p>tel</p>
                <p>address</p>
            </div>
        </div>
    </div>
    <div class="hov">
        <div class="hov_img"><img src="https://img0.baidu.com/it/u=1929941019,3324507395&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="" style="background: royalblue"></div>
        <div class="hov_img">
            <img src="https://img1.baidu.com/it/u=2508655896,2142007349&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="" style="background: pink">
            <div class="hov_text">
                <h2>name</h2>
                <p>tel</p>
                <p>address</p>
            </div>
        </div>
    </div>
</div>
<script>
    var a =document.getElementsByClassName('hov');
    for (var i=0; i<a.length;i++){
        a[i].onmouseover =function () {
            var b = this.children;
            b[0].style.display='none';
            b[1].style.display='block';
        };
        a[i].onmouseout =function () {
            var b = this.children;
            b[0].style.display='block';
            b[1].style.display='none';
        }
    }
</script>
</body>
</html>
举报

相关推荐

0 条评论