CSS li a:visited overriding hover state on mobile

Question

I'm having trouble with visited links and hover states. The social media icons at the bottom of my site have a:list hover state set to a red colour. After the user visits the link, it remains white. On mobile devices as hover states aren't really a thing, there is no red colour. However, when clicking one of the social icons, it remains red. I tried setting the visited colour to white which removes the icon remaining red problem. However, going back to desktop devices means the hover state stops working.

This is the code:

footer li a:hover {
color: #e91d26;
}

footer li a:active {
color: #fff;
}

footer li a:link {
color: #fff;
}

footer li a:visited {
color: #fff;
}

Attached is an image showing the problem on mobile devices with footer li a visited commented out.

a:visited white commented out

Answer 1

This is simply a CSS Specificity problem.

To fix this, simply move your footer li a:hover declaration to the bottom, below footer li a:visited.

like this:

footer li a:active {
    color: #fff;
}

footer li a:link {
    color: #fff;
}

footer li a:visited {
    color: #fff;
}

/* Move : hover down here.. */
footer li a:hover {
    color: #e91d26;
}

Or you could add !important to the color property in your :hover declaration, but this is more of a hack and not suggested..

/* not suggested... but would work */

footer li a:hover {
    color: #e91d26; !important;
}