Does the media query operator "not" actually work?

I actually want to trigger :hover effect only on PC that have mouse, but not on hybrid ones (mouse + touch). My query is :

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

What I want to say is : apply hover to PC that have not at least one coarse pointer (touch). But it doesn't work, neither on chrome nor on firefox or edge. What I am missing ?

Thanks a lot!

1 answer

  • answered 2022-05-02 20:34 A Haworth

    According to MDN

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

    This snippet adds screen to the media query in your question.

    On a laptop without touch screen it appears to work, that is hovering over the div does change it to cyan. If you change the 'coarse' to 'fine' then the hover does not work because the laptop's mouse is considered a fine pointer.

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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum