实现响应式触摸设备适配时，如何移除:hover效果仅保留桌面端生效？

下面是几个实用方案，帮你仅在桌面/非触摸设备保留hover效果：

1. CSS原生媒体查询（推荐） #

利用CSS的hover和pointer媒体特性，精准匹配支持鼠标悬停的设备。把所有:hover相关样式包裹在这个媒体查询内：

/* 仅在支持精确指针（如鼠标）且能触发hover的设备上应用hover样式 */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .hidden-element {
    display: block;
  }
  /* 其他所有:hover样式都放这里 */
}

触摸设备（手机、平板等）会自动忽略这些hover样式，无需额外JS。

2. JavaScript检测触摸设备并添加类 #

如果需要兼容老浏览器，可通过JS检测触摸行为，给页面根元素加标识类，再用CSS覆盖hover效果：

// 监听首次触摸事件，给body添加touch-device类
document.addEventListener('touchstart', function addTouchClass() {
  document.body.classList.add('touch-device');
  // 只执行一次，避免重复添加
  document.removeEventListener('touchstart', addTouchClass);
});

然后在CSS中取消触摸设备的hover效果：

/* 针对触摸设备的元素，重置hover样式 */
.touch-device .project-card:hover .hidden-element {
  display: none;
}
/* 若要全局禁用hover，可使用（注意会影响点击交互，谨慎用）：
.touch-device *:hover {
  pointer-events: none;
}
*/

3. 优化交互逻辑（可选） #

给触摸设备替换交互方式，把hover触发的效果改成点击/触摸触发：

// 给项目卡片添加点击事件，切换隐藏元素显示状态
document.querySelectorAll('.project-card').forEach(card => {
  card.addEventListener('click', function() {
    this.querySelector('.hidden-element').classList.toggle('show');
  });
});

再配合媒体查询区分桌面和触摸端的样式：

@media (hover: hover) and (pointer: fine) {
  .project-card:hover .hidden-element {
    display: block;
  }
  .project-card .hidden-element.show {
    display: none;
  }
}

@media (hover: none) or (pointer: coarse) {
  .project-card:hover .hidden-element {
    display: none;
  }
  .project-card .hidden-element.show {
    display: block;
  }
}

内容的提问来源于stack exchange，提问作者mjshubham21