Состояние наведения кнопки зависает на сенсорных устройствах после нажатия (отлично работает для мыши) ⇐ CSS

[Anonymous]

У меня есть анимация наведения кнопки, которая корректно работает на рабочем столе.
Проблема:

• С мышью:
  
  Наведение работает, но после нажатия на кнопку состояние наведения зависает — этот скрипт исправляет.
• На сенсорных устройствах (мобильный)::
  
  После нажатия кнопки (особенно кнопки отправки формы) она остается в стиле наведения и не сбрасывается даже при использовании того же сценария.

Вопрос:

Почему состояние наведения по-прежнему сохраняется на сенсорных устройствах, и что является правильным способ отключить или сбросить стили наведения при касании, сохраняя при этом наведение для пользователей мыши?
Скрипт, который устраняет проблему для мыши/указателя, но не для сенсорного управления:

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function () {
// target your button and common button classes (keeps backward compatibility)
const buttons = document.querySelectorAll('.elementor-button, .custom-button');

buttons.forEach(button => {
const removeFocusAndHover = () => {
try { button.blur(); } catch (e) {}
button.classList.add('no-hover');
setTimeout(() => button.classList.remove('no-hover'), 140);
};

// pointerdown covers touchstart and mousedown in modern browsers
button.addEventListener('pointerdown', removeFocusAndHover, { passive: true });
// fallback for older touch-only browsers
button.addEventListener('touchstart', removeFocusAndHover, { passive: true });
// final fallback
button.addEventListener('click', removeFocusAndHover);
});
});

Ниже приведен минимальный пример кода кнопки.

Код: Выделить всё

document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('.btn');

const resetHover = () => {
btn.blur();
btn.classList.add('no-hover');
setTimeout(() => btn.classList.remove('no-hover'), 150);
};

// works for mouse
btn.addEventListener('pointerdown', resetHover);
btn.addEventListener('click', resetHover);

// does NOT fix touch
btn.addEventListener('touchstart', resetHover, { passive: true });
});

Код: Выделить всё

.btn {
padding: 12px 30px;
border-radius: 30px;
border: 2px solid #2fb7d9;
background: black;
color: white;
font-size: 16px;
transition: all .3s ease;
}

/* hover animation */
@media (hover: hover) {
.btn:hover {
background: #2fb7d9;
color: black;
}
}

/* force reset class */
.btn.no-hover {
background: black !important;
color: white !important;
}

Код: Выделить всё

Submit

Подробнее здесь: https://stackoverflow.com/questions/798 ... -for-mouse