触屏设备 :hover 兼容处理

aixfe
3,254 阅读1分钟

问题说明

开发 reactjs-player (github.com/goblin-labo…) 时碰到一个问题，进度条的 tooltipe 不会自动消失

原因分析

经过测试，在触屏设备上，元素被 touch 后，进入 :hover 状态切不会退出 hover 状态，需要等待其他元素被 touch 后才会再次退出，根据参考资料了解到 媒体查询 的 hover 和 pointer 判断条件可以用来解决此问题。

hover 用来判断设备是否适合可以或者方便悬停，手机和平板 match 的值是 none pointer 用来判断主要输入设备的精度，手机和平板 match 的值是 coarse（精度有限），PC 设备 match 的值是 fine （精确的指针）

解决方案

  • tooltipe 默认情况下不显示
  • :hover 状态下 tooltipe 显示
  • 支持 hover 和 pointer 媒体查询条件的触屏设备不显示

参考代码：

.tooltip {
  opacity: 0;
}
  
.slider:hover {
  .tooltip {
    opacity: 1;
  }
}

// 手机或者平板不显示 tooltip
@media (hover: none), (pointer: coarse) {
  .slider:hover {
    .tooltip {
      opacity: 0;
    }
  }
}

兼容性

参考文档:

avatar
文章
阅读
粉丝