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 来模拟 hover 事件。例如:

css
.element {
  opacity: 0.5; 
}

.element:hover, 
.element:active {
  opacity: 1;
}

js
$('.element').on('touchstart touchend', function() {
  $(this).toggleClass('hover'); 
});

2. 使用 CSS 媒体查询针对手机端移除 :hover 样式:

css
@media (hover: none) {
  .element:hover {
     opacity: 0.5;
  }
}

3. 使用 JavaScript 动态添加样式支持 hover 效果:

js
let elm = document.querySelector('.element');

elm.addEventListener('touchstart', function() {
  this.classList.add('hover');
});

elm.addEventListener('touchend', function() { 
  this.classList.remove('hover');
});

4. 使用一些第三方库如 FastClick 可以优化移动端的点击响应,来模拟 hover 效果。所以简单来说,移动端实现 hover 一般要配合 JavaScript 事件、CSS 媒体查询、第三方库来处理,达到与 PC 端类似的效果。