限制移动设备的悬停功能

Question

我们只需要为桌面实现悬停，而不需要为任何其他设备（如移动设备和 ipad）实现悬停。

@media（悬停：悬停）， @media（悬停：无）和（指针：粗略）

我们已尝试限制使用这些媒体查询：

@media (hover: hover) and (pointer: coarse) {
        .abc:hover {
            i {
                background-color: red;
            }

    }
}

我希望 Hover 的输出不应在桌面以外的任何设备中观察到（主要是在滑动/长按期间），但实际输出是它在三星 J8（Chrome 版本 -77.0）等少数 android 设备中出现故障.3865.92，Android 版本 9)。

Answer 1

您可以做的是，这样悬停只适用于至少 1024 像素宽的屏幕。

@media screen and (min-width: 1024px) {
  // only put your hover in here
  .abc:hover {
    i { 
      background-color: red
    }
  }
}