Как сделать чтобы hover эффект не лагал при скролле и у кнопки работал cursor pointer?

Для того, чтобы применить hover эффект к элементам HTML и при этом избежать лагов при скроллинге, а также чтобы на кнопках корректно работал курсор pointer, есть несколько рекомендаций и методов.

1. Используйте анимацию и аппаратное ускорение при помощи CSS-свойства transform. При использовании анимации с помощью translate3d() вместо изменения положения элемента через top или left, вы получите плавную анимацию, которая не будет вызывать лагов. Например:

.element {
    transition: transform 0.3s ease;
}

.element:hover {
    transform: translate3d(0, -10px, 0);
    /* другие эффекты при ховере */
}

2. Оптимизируйте работу с hover эффектами при помощи JavaScript. При скроллинге с использованием стандартного события scroll, можно добавить или удалять классы CSS в зависимости от позиции скролла. Например:

// Получаем элементы, на которые нужно добавить hover эффекты
let elements = document.querySelectorAll('.element');

// Функция, проверяющая, виден ли элемент во viewport
function isElementVisible(el) {
    let rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

// Функция, обрабатывающая скролл
function handleScroll() {
    elements.forEach(element => {
        if (isElementVisible(element)) {
            element.classList.add("hover-effect");
        } else {
            element.classList.remove("hover-effect");
        }
    });
}

// Слушаем событие скролла
window.addEventListener("scroll", handleScroll);

3. Для кнопок добавьте правило CSS cursor: pointer; для того, чтобы изменить внешний вид курсора при наведении на кнопки:

button {
    cursor: pointer;
}

Эти методы помогут сделать hover эффекты плавными при скроллинге и обеспечат корректную работу курсора на кнопках. При этом стоит помнить, что производительность может зависеть от размера и сложности страницы, поэтому рекомендуется тестировать и анализировать производительность на конкретных проектах для достижения наилучших результатов.