Как пофиксить hover?

Question

[Jesse Pinkman]

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

На первый взгляд все работает нормально , но если очень быстро наводить и уводить курсор с блока, тогда тховер начинает работать некорректно.

Каким образом можно это пофиксить ?

Использую для этого js. потому что нужно добавить класс с задержкой, конечно можно было бы и css-ом, задать transition-delay при ховере, но это вариант не подошел.

https://codepen.io/jessepinkmanbluecode/pen/poRpJKg

Comments

[StiflerProger]

А зачем задавать класс с задержкой?
Сделай анимацию меню через css hover; А класс, добавляй через js с задержкой

Answer 1

[Арсений Матыцин]

Как вариант решения → debounce.

Answer 2

[RAX7]

$(function () {
  let timeoutId = null;
  $(".sidebar").hover(
    function () {
      timeoutId = setTimeout(() => {
        $(this).addClass("sidebar_hovered");
      }, 600);
    },
    function () {
      // change to any color that was previously used.
      clearTimeout(timeoutId);
      $(this).removeClass("sidebar_hovered");
    }
  );
});

Comments

[Jesse Pinkman]

Периодически вижу и восхищаюсь вашими ответами)
Спасибо!

[RAX7]

Jesse Pinkman, пожалуйста =)