纯css实现hover显示二维码弹窗可行，但需用嵌套div+img结构、避免伪元素加载图片、用visibility+opacity替代display:none实现过渡，并为移动端添加click fallback及z-index合理设置。
纯 CSS 实现 hover 显示二维码弹窗是可行的，但必须避开 title、::after 插入 base64 图片等常见误区——它们无法可靠渲染二维码图像，且不支持尺寸控制和过渡动画。
结构必须用嵌套 div + img，不能靠伪元素生成
二维码本质是图片（png 或 svg），浏览器不支持在 ::before/::after 里加载外部图片资源，也不能用 content: url(...) 做平滑过渡。错误写法：.trigger:hover::after { content: url(qr.png); } —— 这在多数浏览器中不生效或无过渡。
- 正确结构：外层
div.qrcode-trigger作为悬停区域，内部嵌套div.qrcode-popup容器，再放<img src="qr.png"> - 容器必须设
position: relative，浮层设position: absolute，否则定位会漂移 - 不要把
<img>直接塞进触发按钮标签里（比如<button><img></button>），hover 区域和图片加载区域可能错位
visibility + opacity 替代 display: none
首次 hover 时图片“闪一下”或延迟出现，大概率是因为用了 display: none 初始隐藏。浏览器遇到 display: none 会跳过图片加载，直到样式切换才开始 fetch，造成卡顿。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 初始状态用
visibility: hidden; opacity: 0; transition: opacity 0.2s; - hover 时只改
visibility: visible; opacity: 1;，不碰display - 这样图片始终预加载，hover 响应快，且能配合
transition做淡入
移动端没有 hover，得加点击 fallback
iPhone / Android 上手指点下去是 :active，松开就回退，根本不会维持 hover 状态。纯 hover 方案在手机端等于失效。
- 必须用 JavaScript 监听
click事件，手动 toggle 类名（如is-open）来控制显隐 - 或者直接放弃 hover，统一用 click：给触发元素加
role="button"和tabindex="0"，保证键盘可访问 - 如果坚持双模式，注意避免 PC 端 hover + click 重复触发（可用
pointer-events: none在 hover 激活后临时禁用 click）
动态二维码要提前注入 src，别等 hover 才拼 URL
带用户 ID、时间戳或渠道参数的二维码（如 https://example.com?ref=user_123），不能靠 hover 时用 JS 拼字符串再赋值给 img.src——这会导致二次加载、白屏、动画中断。
- 服务端渲染时就把完整
src写死在 HTML 里，例如：<img src="/api/qrcode?uid=abc123"> - 若必须前端生成，用 JS 在页面加载完成时（
DOMContentLoaded）就设置好img.src，确保它和页面一起加载 - 避免在
:hover的 CSS 里尝试用属性选择器（如[data-uid]）驱动图片变化——CSS 无法读取动态属性值
最易被忽略的一点：浮层 z-index 必须高于页面所有其他 fixed/absolute 元素，否则会被遮住；但又不能无脑设 9999——检查你是否已有全局弹窗、广告位或导航栏用了更高层级，否则 hover 出来的二维码可能只显示半截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
