禁用任何内容：在其他媒体上有悬停css效果

Question

我不确定这是否可行，但我想把它扔出去：说我有类似的东西

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

在CSS中

。在打印预览和打印期间，我想＆＃34;禁用＆＃34;无论悬停效果在.this-thing上是什么，这样即使用户在决定要打印页面时将鼠标悬停在给定元素上，/* something magical */的效果也不会出现在打印预览或打印上媒体。

是否有纯CSS解决方案？

请注意，我不想知道/* something magical */的具体内容，以便在@media print期间禁用它。

Answer 1

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

所以你会这样做：

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

在组织上，这可能是胡乱的@media only screen围绕你所有的徘徊，但这是一个选择。

Answer 2

与使用only和and逻辑选择器的方式相同，您可以使用not指定样式规则不应用于某些媒体类型：

@media not print {
    .this-thing:hover {
        /* something magical */
    }
}