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.
