响应式样式不适用于不同尺寸屏幕上的悬停状态

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 而它应该变黑 #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>

响应式样式不适用于不同尺寸屏幕上的悬停状态

Responsive styles not working with hover state on different size screens

css

media-queries

responsive