I have an an html anchor (#play-sound in the snippet below) which when clicked or touched plays a sound. The text in #play-sound is blue normally, but changes to red when hovering, has focus or is active.
When the sound has finished playing I call blur() on #play-sound to make it go back to the blue color. The intended effect is that after clicking (or touching), the text in #play-sound turns red. When the sound has finished playing it changes back to blue.
This works fine on desktop, but on mobile it doesn't change back to blue.
From what I've read, this is because when touched, mobile browsers add a faux hover state to #play-sound and this remains until something else is touched.
I have tried triggering click and touchstart on a different (clickable) element, but they don't seem to remove the faux hover from the #play-sound.
I could change the css class when the sound has ended so that #play-sound is blue on hover/focus/active (just for mobile), then remove the class as soon as something else takes focus, but I feel there must be a better way to do it.
The code below simulates the sound ending with a timeout after one second.
document.getElementById('play-sound')
.addEventListener('click', function() {
setTimeout(function() {
document.getElementById('play-sound').blur();
}, 1000);
});a {
color: blue;
cursor: pointer;
}
a:hover, a:active, a:focus {
color: red;
}<a id="play-sound">Play Sound</a>