鼠标悬停显示二维码的HTML实现方法

CSS 方案最轻量，适合静态二维码。关键是定位、过渡和层级控制。

核心样式示例：

.qrcode-trigger {
  position: relative;
  display: inline-block;
}
.qrcode-popup {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ddd;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.qrcode-trigger:hover .qrcode-popup {
  visibility: visible;
  opacity: 1;
}
.qrcode-popup img {
  width: 120px;
  height: 120px;
  display: block;
}

• top: 120% 比 top: 100% 更稳妥，避开外层元素的 margin 或 line-height 影响
• 必须设 z-index，否则可能被其他绝对定位元素遮挡
• 不要只依赖 opacity 过渡 —— 若没配 visibility，鼠标移入空白区域仍会触发事件（因元素实际占位）

用 JavaScript 补充交互细节的必要场景

当需要延迟显示、点击关闭、或响应式调整位置时，CSS 不够用。常见需求包括：鼠标快速划过不触发、移动端兼容、避免遮挡内容。

• 加防抖：hover 后延迟 300ms 再显示，避免误触 —— 监听 mouseenter 启动 setTimeout，mouseleave 清除
• 移动端 fallback：iOS Safari 对 :hover 支持不稳定，可监听 click 并切换 active 类，或检测 ontouchstart 存在后改用 click 触发
• 位置自适应：若二维码弹出后超出视口右侧，用 JS 计算 getBoundingClientRect()，动态设 left: auto; right: 0
• 点击遮罩关闭：在 .qrcode-popup 外层加透明
  ，点击它移除 show 类

二维码图片本身的优化注意点

二维码不是普通图标，加载和渲染有特殊要求。

• 务必使用 标签而非 CSS background-image —— 后者无法设置 alt，且打印时不会出现
• 尺寸建议 120×120px 起，太小扫码失败率高；用 width/height 属性固定，避免缩放失真
• 若用 SVG 二维码（如通过 QRCode.js 生成），确保内联或作为 插入，不要用