HTML & CSS · Junior · Question 63 of 75

How do you apply hover styles only on devices that can actually hover?

@media (hover: hover) {
  .card:hover { transform: translateY(-2px); }
}

✓Correct answer: Wrap them in @media (hover: hover)
2Use :active instead of :hover
3Hover styles are ignored on phones automatically

Explanation

On touch screens a tap can leave :hover "stuck" until the user taps elsewhere. Media features hover and pointer let you target capable devices.

Further reading

MDN: Using media queries ↗

Test yourself

Take the HTML & CSS · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.