any-hover媒体特征与触屏设备识别实例页面

展示

代码

• HTML：

  <figure>
      <img src="1.jpg">
      <figcaption>图片描述</figcaption>
  </figure>

• CSS：

  figcaption {
      display: none;
  }
  figure:hover figcaption {
      display: block;
  }
  @media (any-hover: none) {
      figcaption {
          display: block;
      }
  }
  
  figcaption {
      width: 256px;
      background-color: rgba(0,0,0,.75);
      color: #fff;
      text-align: center;
      padding: 5px 0;
      margin: -30px auto 0;
      position: relative;
  }
  
  @media (any-hover: none) {
      figcaption {
          box-sizing: border-box;
          margin: 0 auto;
          border: 1px solid #ddd;
          border-top: 0;
          border-radius: 0 0 4px 4px;
          color: inherit;
          background-color: #f5f5f5;
      }
  }