js鼠标移入微信公众号下方显示二维码 鼠标移出微信公众号下方二维码隐藏

在JavaScript中，为了实现微信公众号下方鼠标悬停显示二维码、鼠标移开隐藏的效果，你可以结合CSS和JavaScript来操作。首先，你需要有一个静态的二维码图片元素或者使用第三方库如`qrcode-generator`动态生成二维码。

1. 创建二维码元素并添加到页面上：

<div id="qrcodeContainer" style="display:none;">
    <img id="qrcodeImage" src="" alt="微信二维码">
</div>

2. 使用CSS控制其显示和隐藏：

#qrcodeContainer {
    position: fixed;
    bottom: 20px; /* 根据需求调整位置 */
    right: 20px;
    width: 200px; /* 二维码大小 */
    height: 200px;
    background: rgba(0, 0, 0, 0.5); /* 遮罩层半透明背景 */
    transition: opacity 0.3s;
}

#qrcodeImage:hover + #qrcodeContainer {
    display: block;
}

3. JavaScript监听鼠标事件：

document.getElementById('qrcodeContainer').addEventListener('mouseover', function() {
    this.style.display = 'block';
});

document.getElementById('qrcodeContainer').addEventListener('mouseout', function() {
    this.style.opacity = 0; // 或者使用其他方式渐隐
    setTimeout(function() {
        if (this.style.opacity === 0) {
            this.style.display = 'none';
        }
    }, 300); // 等待一段时间后再隐藏
});

在这个示例中，当鼠标移到包含二维码的容器上方时，二维码及其遮罩层会显示出来；当鼠标移开时，二维码容器会逐渐淡出并在一定延迟后完全消失。