Touch event triggers :hover.

meandrewandyou — Thu, 11 May 2023 07:26:55 +0000

Hello, guys! I'm working on the project where I need some on :hover CSS changes to animate the component. I only need this behavior on devices with the pointer, I don't need touch events to trigger them. And I thought that's what :hover exists for. But unfortunately touch events can imitate hover. I was looking for an answer and found this one:

@media(hover: hover){
.your-class:hover{color: red}
}

This @media tag actually tracking if the device has a pointer or not. If not, hover event won't be executed. My question is: is it the right and overall the best way to achieve what's expected?
Here's minimal demonstration repo.
If you're in Chrome - RMB click -> Inspect -> Toggle device toolbar (in a top left corner of dev tools) -> select Nest Hub Max. Now cursor becomes a "finger" and you could push on the div and it will animate. If you're in another browser - do something similar with it's dev tools. Just be sure to select the touchscreen device with the screen big enough to display all the content of the repo.

DEV Community: meandrewandyou

Touch event triggers :hover.