CODEWITHSUNDEEP
htmlcssipadlessmedia-queries
Ashima
Ashima

Reputation: 4824

apply hover state to desktop version (no tablets and phones) only using media queries

I am applying hover state styling to a div like this:

 div {    

     &:hover {
            color: red !important;
            border: 3px solid red !important;
        }
 }

Now, i do not want to apply this css style to ipads and other tablets. So, i added a media query like this

   div {   

      @media only screen {

         &:hover {
                color: red !important;
                border: 3px solid red !important;
            }

        }
     }

I also tried this

div {   

  @media not handheld {

     &:hover {
            color: red !important;
            border: 3px solid red !important;
        }

    }
 }

But, the hover styling still gets applied on ipad. I am new to media queries.

Any idea how can i achieve that using css/less/media queries or what am i doing wrong here?

Thank you!

Upvotes: 0

Views: 901

Answers (1)

Ashima
Ashima

Reputation: 4824

Thanks to @Ashish and @DOC ASAREL, setting min-width did the trick.

This is the solution:

@media (min-width: 1281px)  {
            &:hover {
                color: red !important;
                border: 3px solid red !important;
            }
        }

Upvotes: 1

Related Questions