CSS hover doesn't trigger until scroll stops or mouse moves [duplicate]

Question

Why does my css:hover effect not start until the scroll animation completes / my cursor moves? Is there any way I can make the:hover event trigger on immediate mouseOver?

https://codepen.io/QuiteQuinn/pen/mdxNReL

Answer 1

As chrome prioritises scrolling, hover will work after the scroll is over. So there is no solution for it as of now. A similar question has been asked previously which you can refer below.

div-hover-not-working-when-scrolling-in-chrome