Hiding and showing an element on hover will provide better UX in some case(for eg. popover). However, this hover interaction will not be available in case of mobile/touch-based devices because they can't detect when you are hovering your finger or stylus on it.

So..., how can we handle such scenarios?

Well! The problem statement seems twisted at first, but with the help of media queries we can handle the use case.

So, what media query are we gonna use?

It's simple! We are going to add two things

• media(hover:hover) => The styles specified inside this media query will be applied for devices which supports hover.

• media(hover:none)=> The styles specified inside this will be applied for devices which doesn't support hover.

You know how to emulate mobile devices! open this

Reference: reference

About me