Как добавить класс только конкретной ссылке?

Question

[Vladislav]

Как добавить класс только конкретной ссылке?
Песочница: https://codepen.io/vladgr/pen/KKzRoyQ
Идея: при ховере добавляется класс, но только конкретно той, на которую навели, через this не получается, но тут еще функция которая добавляет класс ссылке не сразу, а через 1 секунду.

Answer 1

[DanKud]

$('.header__link-category').on('mouseover', function() {
    setTimeout(() => {
        $(this).addClass('hover-active');
    }, 1000);
});

Comments

[Vladislav]

уже ближе, спасибо, а как сделать так: навел курсор на ссылку, добавился ей класс, увел курсор на другую ссылку, с предыдущей класс удплился, а новой ссылке добавился, поняли идею?

[DanKud]

Vladislav, если убирать класс только при наведении на другую ссылку, то так:

let timeout;
$('.header__link-category').on('mouseover', function() {
    $('.header__link-category').removeClass('hover-active');
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        $(this).addClass('hover-active');
    }, 1000);
});

если убирать класс непосредственно когда курсор ушел с текущей ссылки, то можно через .hover()

let timeout;
$('.header__link-category').hover(function() {
    timeout = setTimeout(() => {
        $(this).addClass('hover-active');
    }, 1000);
}, function() {
    clearTimeout(timeout);
    $(this).removeClass('hover-active');
});

[Vladislav]

DanKud, уже ближе, спасибо за пмоощь