PC端:hover 样式在移动端的兼容处理

写了一个轮播，有hover效果，PC端正常显示，移动端就出现一些问题，点击之后滑动到下一张，上一张有hover效果，要点击其他地方才会消失。

解决方案↓，参考文章CSS - :hover 样式在移动端的兼容处理 - 链滴

@media(hover: hover) and (pointer: fine) {
  .ui-thumbnail[data-active] > img, .ui-thumbnail:focus > img, 
  .ui-thumbnail[data-active] > img, .ui-thumbnail:hover > img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    transition-duration: 1000ms;
    -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
  }
}

.ui-thumbnail[data-active] > img, .ui-thumbnail:active > img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  transition-duration: 1000ms;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

扩展：

对于移动端的 :hover 样式兼容,主要可以考虑以下几点:1. 使用触摸事件 wie touchstart、touchend