transition延迟与交互体验提升实例页面

展示

代码

• HTML：

  <a href class="target">显示图片</a>
  <img src="1.jpg">

• CSS：

  .target + img {
      display: block;
      width: 256px;
      position: absolute;
      left: calc(50% - 128px);
      transition-delay: .2s;
      visibility: hidden;
  }
  .target:hover + img,
  .target:focus + img {
      visibility: visible;
  }