Stick Hover States Issue

The problem arises when the user interacts with this element on a touchscreen: after the tap has been done, the hover effect is stuck on the element.

https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

A solution you can find on the web is to use @media (hover: hover). But this means not applying hover effect when the device is touchscreen. If the hover effect is a great animation, then it would be a great loss.

Probably, we should use pointerup, pointerdown event to detect the hover state on touchscreen
and then add .hover class to the element.