CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
pourmesomecode
pourmesomecode

Reputation: 4318

Removing hover effects on touch devices css

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.

Upvotes: 1

Views: 4186

Answers (3)

dylanjameswagner
dylanjameswagner

Reputation: 552

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

Upvotes: 2

OptimusCrime
OptimusCrime

Reputation: 14863

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.

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

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 */
  }
}

Upvotes: 3

Related Questions