ARTICLE AD BOX
I have a button hover animation that works correctly on desktop.
Problem:
With the mouse:
Hover works, and after clicking the button, the hover state gets stuck—this script fixes it.
With touch devices (mobile):
After tapping the button (especially a form submit button), it stays in hover styling and does not reset, even with the same script.
Question:
Why does the hover state still stick on touch devices, and what is the correct way to disable or reset hover styles on touch while keeping hover for mouse users?
Script that fixes the issue for the mouse/pointer, but not for touch:
<script> 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); }); }); </script>Following is the Minimal Example Code of button
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;
}
<button class="btn">Submit</button>
