媒体查询运算符 "not" 真的有效吗？

Question

我实际上只想在有鼠标的 PC 上触发 :hover 效果，而不是在混合型（鼠标 + 触摸）上。我的查询是：

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

我想说的是：将悬停应用到没有至少一个粗指针（触摸）的PC。但它不起作用，无论是在 chrome 还是在 firefox 或 edge 上。我缺少什么？

非常感谢！

Answer 1

根据MDN

if you use the not or only operators, you must explicitly specify a media type.

此代码段将屏幕添加到您问题中的媒体查询。

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

div {
  width: 20vmin;
  height: 20vmin;
  background: pink;
}

@media not screen and (any-pointer: coarse) {
  div:hover {
    background: cyan;
  }
}

<div></div>

媒体查询运算符 "not" 真的有效吗？

Does the media query operator "not" actually work?

css

media

operator-keyword

rules

negation