Why does my link stay on its hover state when on a mobile device? - css

Question

I could very well have lost it.
My :hover, a:link states do not seem to work on a mobile.
I have a fixed nav at the bottom of the screen:
/* nav */
nav#desktop {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
background-color: transparent;
padding-top: 28px;
z-index: 1002
}
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 2.3%
}
#media only screen and (max-width: 675px) {
nav#desktop > ul {
position: relative;
height: 25px;
overflow: hidden;
float: left;
margin: 0 0 28px 3%
}
}
nav#desktop > ul > li {
width: 200px;
font-size: 19px;
font-weight: 400;
float: left;
margin-right: 12px;
position: abolute;
bottom: 0px;
overflow: hidden
}
nav#desktop a {
color: #000
}
nav#desktop a:hover {
color: #8974A7
}
On a desktop the hover works successfully, as in when you hover it shows purple and then goes back to black.
Why on a mobile, when the li item is clicked, does it go purple, and then stay purple.
I did have:
nav#desktop a {
color: #000
}
nav#desktop a:hover, a:focus {
color: #8974A7
}
Thinking :focus was behind it, having removed it now; still no change.
Interestingly, I have:
#mobile-open #mobile-container > ul {
position: relative
}
#mobile-open #mobile-container > ul > li {
margin: 0px;
padding: 0px 0px 15px 0px;
}
#mobile-open #mobile-container > ul > li:last-child {
margin: 0px;
padding: 0px
}
#mobile-open #mobile-container a {
color: #fff;
text-decoration: none;
}
#mobile-open #mobile-container a:hover {
color: #ccc
}
For links within my open menu, and the two states work as expected.

Answer 1

As you can imagine, :hover is almost impossible to truly support on consumer touch devices (there's no detection for when a user is hovering over the screen but not touching it).
So the devices do the best they can, and they end up with what you observe, which is a pretty terrible experience, but you're at the mercy of browser vendors - you're developing on their platforms.
Do what often seems to be done, add a piece of JavaScript to detect (imperfect) user-agent/touch detection and add a class of touch to the body element.
And then, everywhere in your CSS you'd have to do this:
body:not(.touch) someselector:hover { }
Or do the inverse:
body.no-touch someselector:hover { ... }
If you decide you like the :hover implementation of a particular browser vendor when on touch, but not the implementation of another, then you can add further classes to your CSS to target specific browsers/devices.
All solutions are pretty terrible, really.

Answer 2

You need to use :active and :visited to change the color after you selected the element.
:hover on mobile don't work. Devices try to render it as better as they can but with touch device there's not an :hover status.