cssmedia-queriesoperator-keywordrulesnegation

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 ?


Solution

  • 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>