JavaScript 鼠标移动到链接上显示网站名称并生成链接二维码

<!DOCTYPE html>
<html>
<head>
    <title>链接悬停显示网站名称和生成二维码</title>
    <style>
        .link-with-qr {
            position: relative;
        }
        
        .link-with-qr:hover::after {
            content: attr(data-website);
            position: absolute;
            top: -1.5em;
            left: 0;
            background-color: #000;
            color: #fff;
            padding: 0.5em;
            z-index: 9999;
        }
        
        .qr-container {
            display: none;
            position: absolute;
            top: 0;
            left: 2em;
            background-color: #fff;
            padding: 1em;
            z-index: 9999;
        }
        
        .link-with-qr:hover .qr-container {
            display: block;
        }
        
        .qr-container img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="link-with-qr" data-website="链接1">
        <a href="https://example1.com">链接1</a>
        <div class="qr-container"></div>
    </div>
    
    <div class="link-with-qr" data-website="链接2">
        <a href="https://example2.com">链接2</a>
        <div class="qr-container"></div>
    </div>
    
    <!-- 其他链接... -->
    
    <script src="qrcode.min.js"></script>
    <script>
        var links = document.querySelectorAll('.link-with-qr');

        for (var i = 0; i < links.length; i++) {
            var link = links[i];
            var qrContainer = link.querySelector('.qr-container');
            var website = link.getAttribute('data-website');

            var qrCode = new QRCode(qrContainer, {
                text: link.querySelector('a').href,
                width: 128,
                height: 128
            });

            qrContainer.setAttribute('title', website);
        }
    </script>
</body>
</html>