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

Question

这个问题我已经看过好几次了，但似乎没有什么能满足我的要求。

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

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

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

所以在 mobile/touch 屏幕设备上，悬停时不透明度的变化是默认的。

Answer 1

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

另一种选择是将其设置为initial。这将使规则 opacity: initial;。（注意这是not supported in IE，但是在edge中是支持的）

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

这个问题我已经看过好几次了，但似乎没有什么能满足我的要求。

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

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

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

Answer 2

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

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

Answer 3

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

Removing hover effects on touch devices css