Remove :hover for Touch Devices

This topic contains 2 replies, has 2 voices, and was last updated by  1101blueli 3 weeks, 3 days ago.

Author Posts

1101blueli

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

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

Thanks it helps!

Sorry for late reply

You must login or register to reply to this topic.