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

【问题标题】：Responsive styles not working with hover state on different size screens响应式样式不适用于不同尺寸屏幕上的悬停状态
【发布时间】：2020-05-13 04:44:47
【问题描述】：

我有这些样式：

@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。

我错过了什么吗？

【问题讨论】：

您是否尝试过浏览器检查实用程序（Firefox 上的 Inspector，Chrome 上的 Inspect）来查看呈现意外 CSS 结果的原因？
它似乎取消了从 769px 到 992px 的悬停样式
“盒子的颜色在它应该变黑时保持#ffffff #000000。”到底是什么意思？什么变化或事件使您认为背景颜色应该改变而不是保持不变？

标签： css media-queries responsive

【解决方案1】：

你所拥有的似乎对我有用（我为了这个演示的目的改变了一些东西，但@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)";
  }
}

&lt;a class="box"&gt;resize yo browser&lt;/a&gt;

【讨论】：

【解决方案2】：

您忘记添加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;
    }
 }

【讨论】：