删除触摸设备 css 上的悬停效果答案

【问题标题】：Removing hover effects on touch devices css删除触摸设备 css 上的悬停效果
【发布时间】：2016-03-07 14:21:48
【问题描述】：

我已经多次看到这个问题，但似乎没有什么适合我正在寻找的东西。

我需要在我的样式表中保留我的:hover 效果，因为我在桌面上有一些效果。只要我点击900px，我就想删除它们。

有没有办法删除悬停，例如，在悬停的某些元素上，我更改了不透明度。我能做到吗

@media screen and (max-width: 900px) {
  .my_element:hover {
    opacity: none:
  }
}

所以在移动/触摸屏设备上，悬停时不透明度的变化是默认的。

【问题讨论】：

【解决方案1】：

这不是不透明度的正确默认值。默认值为opacity:1。您可以使用 MDN（或任何其他资源，但 MDN 通常将其放在前面和中心）查找默认值，如下所示：https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

另一个选项是将其设置为initial。这将使规则opacity: initial;。（注意这里是not supported in IE，但是edge支持）

最后，您可以考虑将悬停值放在相反的媒体查询中。对于您的示例，这将是以下内容：

我已经看过几次这个问题，但似乎没有什么适合我正在寻找的东西。

我需要在我的样式表中保留我的 :hover 效果，因为我在桌面上有一些效果。一旦我达到 900 像素，我就想删除它们。

有没有办法移除悬停，例如，在悬停的某些元素上，我更改了不透明度。我能做到吗

@media screen and (min-width: 901px) {
  .my_element:hover {
    /* your hover state style rules */
  }
}

【讨论】：

【解决方案2】：

您可以颠倒您的逻辑，使用移动优先的方法，而不是在 900 像素处添加悬停效果。即（最小宽度：900px）

【讨论】：

【解决方案3】：

没有简单的方法（据我所知）来简单地删除每个悬停效果。您必须重置每个悬停应用的各个效果。

但是，我想提一下，在大多数情况下，这样做是不必要的。对于触摸设备，不应出现悬停效果，因为没有可悬停的光标。就这样吧，认为它不可能到达。

【讨论】：