focus点击显示二维码图片实例页面

展示

代码

• HTML：

  点击后面的二维码图标：<img class="icon-qrcode" src="icon-qrcode.svg" tabindex="0">
  <img class="img-qrcode" src="qrcode.png">

• CSS：

  .icon-qrcode {
      width: 20px; height: 20px;
      vertical-align: middle;
  }
  .img-qrcode {
      position: absolute;
      display: none;
      box-shadow: 1px 1px 2px rgba(0,0,0,.2);
  }
  :focus + .img-qrcode {
      display: inline;
  }