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

Es folgt der minimale Beispielcode der Schaltfläche

Code: Select all

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

Code: Select all

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

Code: Select all

Submit