Der Hover-Status der Schaltfläche bleibt auf Touch-Geräten nach dem Tippen hängen (funktioniert gut mit der Maus) ⇐ CSS

[Anonymous]

Ich habe eine Schaltflächen-Hover-Animation, die auf dem Desktop korrekt funktioniert.
Problem:

• Mit der Maus:
  
  Hover funktioniert, und nach dem Klicken auf die Schaltfläche bleibt der Hover-Status hängen – dieses Skript behebt das Problem.
• Mit Touch-Geräten (mobil):
  
  Nach dem Tippen auf die Schaltfläche (insbesondere auf die Schaltfläche zum Senden eines Formulars) bleibt sie im Hover-Stil und wird nicht zurückgesetzt, selbst mit demselben Skript.

Frage:

Warum bleibt der Hover-Status immer noch auf Touch-Geräten hängen und wie geht das richtig? Hover-Stile bei Berührung deaktivieren oder zurücksetzen, während der Hover für Mausbenutzer beibehalten wird?
Skript, das das Problem für die Maus/den Zeiger behebt, aber nicht für Touch:

Code: Select all

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);
});
});