Why do mouseleave and mouseenter sometimes get stuck?

Question

JavaScript

Hello!

I do this https://jsfiddle.net/bb7pqwb8/17/ so that when the mouse cursor is hovered, the asterisk is filled with white (class fas), and when it is moved away, it is outlined (class far). They use this icon https://fontawesome.com/icons/star?style=solid .

It happens that during the retraction there is no change of classes.

What is the jamb?

Answer 1

Instead of adding/removing the fas class, it's better to use the CSS pseudo-class :hover
As for your specific question, I think it's the browser engine. The possibility of an event is determined by some tick, and if 2 events occurred simultaneously in one tick (mouseleave and mouseenter), then only the first one is sent ( not exactly, but I was close, here, for those who are interested https://learn.javascript.ru /mousemove-mouseover-mo... ). There is also such a thing that if the element is on the edge of the work area and we put the cursor on it, and then brought it out of the work area, then the mouseleave event does not occur.
I'll tell you from experience: if something can be done without JS, it's better to do it.