How to remove all hovers on small devices?

Question

How to remove hover effects for elements in css.

I have for example such html and css:

@media (max-width: 1220px) {
  .column {
    width: 200px;
  }
  .para {
    display: none;
  }
  .link:hover {
    color: red;
  }
}

@media (max-width: 992px) {
  .column {
    width: 100px;
  }
}

<div class="column">
  <a class="link" href="#">Some link</a>
  <p class="para">
    Some para
  </p>
</div>

By fact there is much more element. How to disable all hover for elements for screen size less than 992px?

JSFiddle

combine your css media query with this answer http://stackoverflow.com/questions/5069110/remove-hover-css-behavior-from-element — Stavm, Mar 14 '17 at 11:15
both the accepted answer to that post and the one with 124 votes would work nicely — Yvonne Aburrow, Mar 14 '17 at 11:25
@YvonneAburrow doesn't work for me. in example case it is different elements, in my case it is the same elemtn in different media size — Angelzzz, Mar 14 '17 at 12:17
I think yvonnes answer is great, instead of `removing on smaller devices` do: `add hover on big devices` in css its always easier to add then to remove. — Joel Harkes, Mar 15 '17 at 09:58

Yvonne Aburrow · Accepted Answer · 2017-03-15T09:40:15.917

0

    @media (max-width: 1220px) {
  .column {
    width: 200px;
  }
  .para {
    display: none;
  }

}

    @media only screen and (max-width: 1220px) and (min-width: 993px) {

      .link:hover {
        color: red;
      }
    }

    @media (max-width: 992px) {
      .column {
        width: 100px;
      }

    }

What is happening in your original CSS is that because the first media query is for max-width: 1220px, that also applies to the second media query. Therefore, you need to specify a min-width in the first query, so that the :hover condition is not applied to all screens with max-width: 1220px (which would include screens with max-width 992px as well).

EDITED to reflect the requirement that some styles DO apply to all screen resolutions below 1220px.

edited Mar 15 '17 at 09:40

answered Mar 14 '17 at 14:30

Yvonne Aburrow

2,602
1
17
47

the issue is that i need some classes to be used in max-width: 992px, for example leave .para display: block. note that it is just example, by fact it is more that 20 classes with 100 elements – Angelzzz Mar 14 '17 at 18:59
well, you can have one media query that encompasses all screen resolutions, as in your OP, and another that specifies that hover states only happen between the two screen resolutions (as in my answer). – Yvonne Aburrow Mar 15 '17 at 09:38
thanks for accepting my answer :) (yay, finally broken the 200 barrier, made my day) – Yvonne Aburrow Mar 15 '17 at 10:16

How to remove all hovers on small devices?

1 Answers1