悬浮二维码 - 鼠标悬停显示二维码 - 一键代码

鼠标悬停即显示二维码，效果类似本站右上角二维码。

首先需要一个JS生成二维码的插件：qrcode-generator

在大概了解了使用方法之后，很简单的引入该脚本的BootCDN链接：

<script src="https://cdn.bootcdn.net/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"></script>

然后…… 当然是直接上代码！：

<script src="https://cdn.bootcdn.net/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"></script>
<style>
.hover-qr:hover{
    z-index: 9999999;
}
.hover-qr:not(:hover):after{
    display: none;
}
.hover-qr:after{
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    border-radius: 0.1em;
    overflow: hidden;
    border: 1px solid #eee;
    line-height: 0;
}
.hover-qr-right:after{
    left: unset;
    right: 0;
}

.hover-qr-up:after{
    top: unset;
    bottom: calc(100% + 5px);
}
</style>
<script>
// 关于二维码生成
(function forHoverQr(){

// 屏蔽移动端
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) return;


let styleEle = document.createElement("style");
document.body.appendChild(styleEle);

let counter = 0;
document.querySelectorAll(".hover-qr").forEach(ele=>{
    let qr = qrcode(0, 'M');
    qr.addData(ele.getAttribute("data-qr")||ele.href||location.href);
    qr.make();
    let cls = `qr-unique-${++counter}`;
    ele.className += ` ${cls}`;
    if(getComputedStyle(ele).position =="static") ele.style.position="relative";
    styleEle.innerHTML+=`.${cls}:after{
        content: url(${qr.createDataURL(4)});
    }`
}
);

})();

</script>

之后，只需要在需要悬浮显示二维码的元素上加上hover-qr类，并把要生成二维码的内容（一般为链接）放入data-qr属性里就可以了。

之后上面的脚本就会自动对hover-qr类元素进行处理，（脚本需要在元素加载之后运行，可以放在页面代码最后执行。），如果没有data-qr属性，脚本会相继尝试href和location.href。

可能不能适配汉字，如有需要，可以根据qrcode-generator说明更改代码，也可以更改二维码格子大小。

二维码以after伪类状态存在，要求元素本身不能有after伪类，也可以手动改代码改成before。

二维码默认位置在元素下方左对齐，可以给元素加hover-qr-up类让二维码显示在元素上方，加hover-qr-right类让二维码右对齐。

也可以手动调整相应元素伪类:after样式。