Html 禁用任何内容：在不同媒体上悬停css效果

我不确定这是否可能，但我想把它扔出去：比如说我有

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

在CSS中。在打印预览和打印期间，我想“禁用”任何

上的悬停效果。这件事

，这样即使用户在决定打印页面时将鼠标悬停在给定元素上，来自

/*神奇的东西*/

的效果也不会出现在打印预览或打印媒体上

有没有一个纯粹的CSS解决方案

---

请注意，我不想了解

/*神奇的东西*/

的具体细节，以便在

@media print

期间禁用它。您可以使用

@media only screen

将悬停效果仅应用于

：hover

规则

所以你会这样做：

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

---

从组织上讲，这可能会给所有悬停的

@media only screen

造成混乱，但这是一个选项。

与使用

only

和

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

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

打印样式会继承悬停规则，这对我来说太奇怪了！我做了一个快速测试，它肯定会出现在打印预览中。有趣的问题！