html - 禁用任何 :hover css effects there is when on a different media

Question

我不确定这是否可能，但我想把它扔在那里:说我有类似的东西

.this-thing:hover {
  /* something magical */
}

在 CSS 中。在打印预览和打印期间，我想“禁用”.this-thing 上的任何悬停效果，这样即使用户在决定要打印时悬停在给定元素上页面上，/* something magic */ 的效果不会出现在打印预览或打印媒体上。

是否有纯 CSS 解决方案？

请注意，我不想找出 /* something magical */ 的具体细节是为了在 @media print 期间禁用它。

Answer 1

您可以使用 @media only screen 将悬停效果仅应用于 :hover 规则。

所以你会这样做:

@media only screen {
    .this-thing:hover {
      /* something magical */
    }
}

从组织上讲，在所有悬停周围添加 @media only screen 可能是一团糟，但这是一个选择。