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

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

当我的屏幕介于 769 像素和 992 像素之间时，框的颜色会保持 #ffffff，而它应该变黑 #000000。

我错过了什么吗？

标签： cssmedia-queriesresponsive

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