媒体查询运算符"not"实际工作吗？

Question

我实际上只想在有鼠标的PC上触发:悬停效果，而不是在混合PC上(鼠标+触摸)。我的查询是:

@media not (any-pointer: coarse) {
tag:hover { some effect }
}

我想说的是:对没有至少一个粗指针(触摸)的PC应用hover。但它不管用，在chrome、火狐和edge上都不行。我错过了什么?

Answer 1

根据MDN

如果使用not或only操作符，必须显式指定媒体类型。

这段代码将screen添加到问题中的媒体查询中。

在没有触摸屏的笔记本电脑上，它似乎可以工作，将鼠标悬停在div上确实会将其更改为青色。如果你将"粗"改为"细"，则悬停不起作用，因为笔记本电脑的鼠标被认为是一个细指针。

div {
width: 20vmin;
height: 20vmin;
background: pink;
}
@media not screen and (any-pointer: coarse) {
div:hover {
background: cyan;
}
}

<div></div>