Restrict Hover functionality for Mobile

Question

We need to implement hover only for desktop but not to any other devices like (mobile and ipad).

@media (hover: hover), @media (hover: none) and (pointer: coarse)

We have tried restricting using these media queries:

@media (hover: hover) and (pointer: coarse) {
        .abc:hover {
            i {
                background-color: red;
            }

    }
}

I expect the output of Hover should not be observed in any of devices other than in desktop (mainly during swipe/ long press), but the actual output is it is breaking in few android devices like Samsung J8(Chrome version -77.0.3865.92, Android version-9).

score 0 · Answer 1 · answered Sep 20 '19 at 14:51

0

What you can do is, this way the hover only works on screens atleast 1024px wide.

@media screen and (min-width: 1024px) {
  // only put your hover in here
  .abc:hover {
    i { 
      background-color: red
    }
  }
}

answered Sep 20 '19 at 14:51

Robbin van der Jagt

796
4
15

can we get any other solution to find touch device other than using resolution – sruthi duddella Sep 20 '19 at 14:54
There are laptops that also have touch functions now a days. Are you considering those? – Robbin van der Jagt Sep 20 '19 at 14:56
Yes. For all touch devices hover should be disabled – sruthi duddella Sep 20 '19 at 15:01
https://jsfiddle.net/or9b4dnk/ this is a very small example, but the hover works for desktop, not on screen with touch – Robbin van der Jagt Sep 20 '19 at 15:03
It is not working for SamsungJ8(Chrome version -77.0.3865.92, Android version-9). – sruthi duddella Sep 20 '19 at 15:09

Restrict Hover functionality for Mobile

1 Answers1