March 18, 2020
CSS styles for hovering (like a:hover
) can be janky and annoying on touch screen devices that don't support hovering.
You can easily fix this by wrapping your hover styles with a CSS media query that detects whether the current device has a cursor that can hover.
@media (hover: hover) {
a:hover {
/* hover styles */
}
}
Now, the styles inside that @media
block will only be applied if the device supports hover.
The opposite of this is also possible - applying styles only to devices that do not support hovering.
@media (hover: none) {
/* styles for touchscreen devices */
}
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!