html中hover属性拓展鼠标放置在图片上出现二维码

最新推荐文章于 2025-10-05 03:41:16 发布

原创最新推荐文章于 2025-10-05 03:41:16 发布 · 5k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#hover #二维码

本文介绍了一种使用HTML和CSS实现鼠标悬停时显示微信二维码的方法。通过设置相对定位和绝对定位，使得二维码图片能在特定条件下显示出来，增强用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            margin-top: 200px;
            margin-left: 200px;
            width: 200px;
            height: 200px;
        }

        .weixin {
            position: relative;
        }

        .weixin img.qrcode {
            position: absolute;
            z-index: 99;
            top: -200px;
            right: -40px;
            width: 7.5rem;
            max-width: none;
            height: 7.5rem;
            transform: scale(0);
            transform-origin: top right;
            opacity: 0;
            border: .3125rem solid #0085ba;
            border-radius: .25rem;
            -webkit-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;

        }

        .weixin:hover img.qrcode {
            transform: scale(1);
            opacity: 1;
        }
    </style>
</head>
<body>
<div>
    <a class="weixin" href="http://www.baidu.com">
        <img src="./img/优酷.webp" alt="微信二维码">
        <img class="qrcode" src="./img/优酷二维码.jpg" alt="">
    </a>
</div>

</body>
</html>