Адаптивные стили не работают с состоянием наведения на экранах разных размеров

Question

У меня есть следующие стили:

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

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

Когда у меня экран между 769px и 992px, цвет поля остается #ffffff, когда он должен go black # 000000.

Я что-то упустил?

Answer 1

вы забыли добавить screen и слово and теперь работает

@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;
    }
 }

Answer 2

То, что у вас, похоже, работает для меня (я кое-что изменил для целей этой демонстрации, но правила @media, по сути, такие же)

@media (min-width: 200px) and (max-width: 600px) {
  .box {
    background-color: green;
  }
  .box:hover {
    background-color: yellow;
  }
  .box:after {
    content: " (200-600)";
  }
}

@media screen and (min-width: 601px) {
  .box {
    background-color: red;
  }
  .box:hover {
    background-color: blue;
  }
  .box:after {
    content: " (>600)";
  }
}

<a class="box">resize yo browser</a>