hover 触发二维码显示的 DOM 结构怎么组织
直接用 title 属性或纯 CSS ::after 伪元素生成二维码不可行——它们不支持嵌入图片或 SVG，且无法控制尺寸和交互行为。正确做法是预先加载二维码（<img> 或 <svg></svg>），再通过 CSS 控制显隐。
推荐结构：<div class="qrcode-trigger">扫码关注<div class="qrcode-popup"><img src="qrcode.png" alt="二维码"></div>
</div>。外层 qrcode-trigger 是悬停区域，内层 qrcode-popup 是浮层容器，避免脱离文档流导致布局跳动。
- 不要把
<img>直接放在<a></a>标签里再 hover —— 点击区域和悬停区域可能不一致 - 不要用
display: none初始隐藏浮层 —— 这会导致首次 hover 时图片加载延迟、闪动；改用visibility: hidden; opacity: 0配合transition - 若二维码是动态生成（如含用户 ID），需服务端渲染或 JS 注入
src，不能依赖纯 CSS
纯 CSS 实现 hover 显示的样式要点
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外层加透明<div class="qrcode-overlay">，点击它移除 <code>show类二维码图片本身的优化注意点
二维码不是普通图标，加载和渲染有特殊要求。
- 务必使用
<img>标签而非 CSSbackground-image—— 后者无法设置alt，且打印时不会出现 - 尺寸建议 120×120px 起，太小扫码失败率高；用
width/height属性固定，避免缩放失真 - 若用 SVG 二维码（如通过 QRCode.js 生成），确保内联或作为
<svg></svg>插入，不要用<img src="data:image/svg+xml,...>%20%E2%80%94%E2%80%94%20%E9%83%A8%E5%88%86%E8%80%81%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E8%A7%A3%E6%9E%90 %0A - HTTPS%20%E9%A1%B5%E9%9D%A2%E4%B8%AD%EF%BC%8C%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80%E5%BF%85%E9%A1%BB%E6%98%AF%20HTTPS%EF%BC%8C%E5%90%A6%E5%88%99%20Chrome%20%E4%BC%9A%E6%8B%A6%E6%88%AA%E5%B9%B6%E6%8A%A5%20
Mixed%20Content%20%E9%94%99%E8%AF%AF %0A
%E7%9C%9F%E6%AD%A3%E9%BA%BB%E7%83%A6%E7%9A%84%E4%B8%8D%E6%98%AF%E6%98%BE%E7%A4%BA%EF%BC%8C%E8%80%8C%E6%98%AF%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%86%85%E5%AE%B9%E5%A4%B1%E6%95%88%E3%80%81%E5%B0%BA%E5%AF%B8%E7%B3%8A%E6%8E%89%E3%80%81%E6%88%96%E5%9C%A8%E6%89%8B%E6%9C%BA%E4%B8%8A%E7%82%B9%E4%B8%80%E4%B8%8B%E5%B0%B1%E6%B6%88%E5%A4%B1%E5%8F%88%E5%BC%B9%E4%B8%8D%E5%87%BA%E2%80%94%E2%80%94%E8%BF%99%E4%BA%9B%E5%BE%80%E5%BE%80%E6%BA%90%E4%BA%8E%E5%88%9D%E5%A7%8B%E5%8A%A0%E8%BD%BD%E7%AD%96%E7%95%A5%E5%92%8C%E7%A7%BB%E5%8A%A8%E7%AB%AF%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%B2%A1%E5%AF%B9%E9%BD%90%E3%80%82
%0A"> - 务必使用
