How to change CSS elements for mobile and tablet (touch screens) only

Hawkmoth

I'm using Twine 2, SugarCube 2.

My Twine game (A Fire Darkly: Chapter 1) is comfortably-playable both on PC and on mobile / tablet.

But there's one problem when you play on mobile or tablet. Sometimes the links randomly look like they're being "hovered" on, even though you can't hover on a touch screen. How can I alter the CSS to remove link hover effects only when the game is being played on mobile or tablet?

Carradee

Media queries.

You set a media query to a screen max-width to cover tablets and phones, then put the overrides inside the query brackets.

@media screen and (max-width: 800px) {
/* put your overrides here */
}

You could leave off the "screen and", but then it can affect other devices, too, like if the page is sent to the printer.

Hawkmoth

Thanks!