Почему бывает залипают mouseleave и mouseenter?

Question

[albertalexandrov]

Здравствуйте!

Делаю так https://jsfiddle.net/bb7pqwb8/17/, чтобы при наведении курсора мыши звездочка заливалась белым цветом (класс fas), а при отведении - обводка (класс far). Используют вот такую иконку https://fontawesome.com/icons/star?style=solid.

Бывает так, что при отведении не происходит смена классов.

В чем косяк?

Answer 1

[Александр]

Вместо добавления/удаления класса fas лучше использовать CSS псевдоклас :hover

Что касается конкретно вашего вопроса, то думаю дело в движке браузера. Возможность события определяются по какому-то тику и если в один тик произошло одновременно 2 события (mouseleave и mouseenter) - то отправляется только первое (не совсем так, но я был близок, вот, кому интересно https://learn.javascript.ru/mousemove-mouseover-mo...). Еще есть такая штука, что если элемент находится на краю рабочей области и мы навели на него курсор, а потом вывели его за рабочую область, то событие mouseleave не наступает.

Я вам по опыту скажу: если что-то можно сделать без JS - лучше так и делать.