CODEWITHSUNDEEP
cssmedia-queriesresponsive
redoc01
redoc01

Reputation: 2325

Responsive styles not working with hover state on different size screens

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?

Upvotes: 0

Views: 373

Answers (2)

Moob
Moob

Reputation: 16204

What you have seems to work for me (i've changed some stuff for the purpose of this demo but the @media rules are essentially the same)

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

Upvotes: 1

Rampage Programming
Rampage Programming

Reputation: 116

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

Upvotes: 4

Related Questions