Responsive styles not working with hover state on different size screens

Question

I have these styles:

@media (min-width: 769px) and (max-width: 992px)
{
      .box:hover{
          background-color:#000000;
      }
}

@media screen and (min-width: 993px)
{
      .box:hover{
          background-color:#ffffff;
      }
}

When i have a screen between 769px and 992px, the color of the box stays #ffffff when it should go black #000000.

Am i missing something?

Answer 1

you forgot to add screen and the word and now is working

@media screen and (min-width: 769px) and (max-width: 992px)
  {
   .item_image--products:hover{
      background-color:#000000;
   }
}

@media screen and (min-width: 993px)
{
  .item_image--products:hover{
      background-color:#ffffff;
    }
 }