Recently, I am developing a product card component that can be used in other components such as carousel, grid, and list components. As a frontend dev, I have to work on the CSS rules and SCSS. For the card component I build, the whole card needs to be clickable. When users click on the card, it will redirect to the assigned link.
Problem with touch devices
For the card design from the designer, the card will show the effect of the hover state. Users can click on the card and it will redirect to the assigned link. This requirement is work great on the desktop but it won’t work properly on the touch devices such as tablets and mobiles. On the touch devices, when users hold or sometimes tap on the card, the hover effect shows up. The designer wants to get rid of the hover effect on the touch devices so that when users tap on the card, it will redirect to the assigned link.
Solution
To solve the problem, we will use the hover with media feature (CSS4). The idea is, that we will add the CSS rules for the hover state when the devices support the hover state.
@media (hover: hover) {
/* when hover is supported */
a:hover {
color: white;
background: black;
}
}Browser Compatibility
You can check the browser compatibility for the hover media feature from this link. I already tested on the latest IOS and Andriod in September 2022. The code is working great as expected.
That’s it for today. Happy coding!
