移动端 hover 问题处理

在移动端和PC端公用一套样式时, 移动端中 hover 特性, 如果滑动时稍微触碰了下，会导致一直 hover 高亮状态, 需要点击空白地方才能恢复原状。如果PC和移动端公用一套样式, 那就需要分开处理。

移动端 hover 高亮状态的处理, 有些是在 body 上绑定一个空的 touchstart 事件, 但是很多手机还是会存在问题, 一样会一直保持 hover 状态。

document.body.addEventListener('touchstart', () => {}, false);

最好的方式还是通过媒体标签处理, pc 端正常显示 hover 状态, 移动端禁用该状态。如下所示:

css 写法, 使用较繁琐:

@media (any-hover: hover) {
  .test-li {
    color: red;
  }
}

less写法:

// 定义混入类
.pc-hover(@rules) {
  @media (any-hover: hover) {
    @rules();
  }
}

// 使用时, 比如 sort-link 类需要加上 hover 效果
.pc-hover({
    .sort-link:hover {
      transform: scale(1.05);
    }
  }
);

// 或者如下方式均可
.sort-link:hover {
  .pc-hover({
      transform: scale(1.05);
    }
  );
}

sass写法:

// 定义混入方法
@mixin pc-hover {
  @media (any-hover: hover) {
    @content;
  }
}

// 使用时
@include pc-hover {
  .grid-item-content:hover {
    transform: scale(1.009);
    font-size: 14px;
  }
}

本文转载至 hover 问题处理, https://www.nqone.com/router/d…