:hover not applying to an element with a class [duplicate]

The selectors you're using don't mean what you think they mean.

The first set of selectors do indeed target your <a> element:

a:link { color: #458dff; }

However, these do not:

.navLink a:link { color: #458dff; }

These are looking for <a> elements which are descendants of a .navLink element. You have just the one element, no ancestors or descendants. So the selector needs to target the element itself as both an <a> and a .navLink:

a.navLink:link { color: #458dff; } a.navLink:visited { color: red; } a.navLink:hover { color: #ffa100; }