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

Question

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!

I guess you must use a `min-device-width`. Look here at the table http://viewportsizes.com/?filter=ipad. So a `768px` would work! — loveNoHate, Oct 01 '14 at 19:41
I hope this link may help you - http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile — Ashish, Oct 01 '14 at 19:48

score 1 · Accepted Answer · answered Oct 01 '14 at 20:02

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

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

1 Answers1