如何在移动端移除所有元素hover效果，保留点击且桌面端hover正常？

1. CSS原生媒体查询方案（优先使用，无额外JS开销） #

利用CSS的交互媒体特性直接匹配无hover能力的触摸设备，全局重置hover样式：

/* 匹配所有不支持hover的触摸类设备（含手机、平板等） */
@media (hover: none) and (pointer: coarse) {
  *:hover {
    /* 重置所有hover状态的自定义样式，优先级足够的话可以不加!important */
    all: unset !important;
    /* 如果不需要全量重置，也可以单独覆盖项目中用到的hover属性，例如：
    background-color: inherit !important;
    color: inherit !important;
    border: initial !important;
    box-shadow: none !important;
    */
  }
}

/* 如果你是按响应式断点区分桌面/移动端，也可以用宽度判断 */
@media (max-width: 768px) {
  *:hover {
    all: unset !important;
  }
}

2. JS动态控制方案（适合需要灵活开关的场景） #

如果需要根据业务逻辑动态开启/禁用hover效果，可以用JS检测设备后打标记：

// 检测是否为触摸设备
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
if (isTouchDevice) {
  document.body.classList.add('disable-hover-all');
}

搭配对应CSS规则：

.disable-hover-all *:hover {
  all: unset !important;
}

特殊场景适配 #

如果有部分元素需要在移动端保留hover效果，可新增例外规则：

@media (hover: none) and (pointer: coarse) {
  *:hover:not(.reserve-hover) {
    all: unset !important;
  }
}

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