Remove :hover for Touch Devices

Author Posts

1101blueli August 16, 2021 at 5:33 pm

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hello,

So I found a code from this thread
https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices/64553121#64553121

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

If I create a media query for @media (hover: hover) and (pointer: fine)
is it a good idea?

No I should do this way:

@media (hover: none) {
   a:link {
      color: red;
   }
}

I dont really understand what @media (hover: none) does.

I wonder what would you do or any workaround here with MT?

Thanks

Sebastian August 17, 2021 at 10:21 am

Hey,

@media (hover: none)

Is a media query for targeting touch devices only, as they do not have hover states (even though hover styles can render on touch/click instead). So one way to override hover styles, that may have been added by a theme, is to use the above media query. Once example given on that thread, to prevent the color of all links from changing on hover, is to add the following selector:

a:hover { color: inherit; }

That would make the item inherit the color of their parent element. Another option (which might be better) would be to set:

a:hover { color: currentColor }

That should keep the color set on links in their normal state (though I haven’t tested this to make 100% sure it will work).

BTW in Microthemer, you can add a new media query via the “Edit media queries” option to the left of the responsive tabs. Once you’ve added it, a new tab with the label you set will appear in the MT interface. You can then paste the example selectors above into the code editor to the left of the Font property group.

The suggestion of using:

@media (hover: hover) and (pointer: fine)

Is best if you have full control over the site’s hover styles. If you do, adding all hover styles inside that media query means they will not have any effect on touch devices, and so there is nothing to override, which is easier to maintain. But if hover styles come from elsewhere, like a theme or plugin, you will have to use hover: none to override instead.

Does that make sense?

Thanks,
Sebastian

1101blueli September 2, 2021 at 4:59 pm

Thanks it helps!

Sorry for late reply

You must login or register to reply to this topic.