如何避免触控设备滚动时触发:hover副作用，同时保留鼠标端:hover正常交互

解决方案 #

方案1：CSS媒体查询实现（最推荐，无JS依赖） #

利用CSS原生的hover媒体特性，仅在支持真实悬停交互的设备（即带鼠标/触控板的设备）上加载:hover样式，触控设备会自动忽略这段样式，同时适配同时支持触控+鼠标的二合一设备。
如果使用原生CSS，写法如下：

.CardsFlow {
  width: 320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  background: #bdc3c7;
  padding: 6px;
}

.Card {
  height: 200px;
  background: #2980b9;
}

/* 仅在支持悬停的指针设备上生效 */
@media (hover: hover) and (pointer: fine) {
  .Card:hover {
    background: #e74c3c;
  }
}

如果使用示例中的Sass预处理器，可以简化为嵌套写法：

.CardsFlow
  width: 320px
  margin: 0 auto
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-gap: 12px
  background: #bdc3c7
  padding: 6px

.Card
  height: 200px
  background: #2980b9

  @media (hover: hover) and (pointer: fine)
    &:hover
      background: #e74c3c

该方案兼容性覆盖95%以上的现代浏览器，无需修改HTML结构、无需引入JS代码，符合W3C标准规范。

方案2：JS兼容方案（适配极旧浏览器） #

如果需要兼容不支持上述媒体查询的老旧设备，可以通过JS判断设备是否支持触控，给根元素添加标记类，再配合CSS限制:hover的生效范围：

1. 页面加入以下JS代码：

// 检测到触控能力后给html根元素加标记类
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
  document.documentElement.classList.add('is-touch-device');
}

2. 调整CSS的hover选择器：

/* 仅非触控设备触发hover样式 */
html:not(.is-touch-device) .Card:hover {
  background: #e74c3c;
}

两种方案都可以完全避免触控设备滚动时误触发:hover样式，同时不会影响鼠标设备的正常悬停交互。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD