Removing hover effects on touch devices css

Question

I've seen this question a few times but nothing seems to work for what I'm looking for.

I need to keep my :hover effects in my stylesheet as I have a few on Desktop. As soon as I hit 900px I want to remove them.

Is there a way to remove a hover so for example, on some elements on hover I change the opacity. Am I able to do

@media screen and (max-width: 900px) {
  .my_element:hover {
    opacity: none:
  }
}

So on mobile/touch screen devices the change in opacity on hover is default.

Answer 1

That's not the correct default value for opacity. The default value is opacity:1 . You can look up the default values using MDN (or whatever other resource, but MDN usually has it front and center) like so: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

---

Another option is to set it to initial . That would make the rule opacity: initial; . (Note that this is not supported in IE , but it is supported in edge)

---

Lastly, you could consider instead placing your hover values in an opposite media query. For your example this would be the following:

I've seen this question a few times but nothing seems to work for what I'm looking for.

I need to keep my :hover effects in my stylesheet as I have a few on Desktop. As soon as I hit 900px I want to remove them.

Is there a way to remove a hover so for example, on some elements on hover I change the opacity. Am I able to do

@media screen and (min-width: 901px) {
  .my_element:hover {
    /* your hover state style rules */
  }
}

Answer 2

You could reverse your logic, using a mobile first approach, instead adding your hover effects at 900px. ie (min-width: 900px)

Answer 3

There is no simple way (as far as I know) to simply remove every hover effect. You will have to reset the individual effects each hover applies.

However, I would like to mention that doing this is in most cases not necessary. For touch devices, no hover effect should be present, as there is no cursor to hover with. Just leave it be and consider it impossible to reach.