Hover property not working on one element but is on another - html

Question

When I hover over my Login and Register buttons, they do not turn yellow. When I hover over my click-to-email-admin button, it turns yellow. The code is the same for both links. As far as I can tell, nothing is stopping the two buttons from changing colors.
I'm aware that a:hover has to come AFTER a, a:visited. I've got it set up that way.
What is wrong with my CSS?
CSS
html {
min-height: 100%;
width: 2000px;
max-width: 100%;
}
body {
background: #292E37;
font-size: 13px;
width: 2000px;
max-width: 100%;
}
header {
z-index: 1;
top: 0;
max-width: 100%;
position: fixed;
background: cornflowerblue;
width: 100%;
height: 10%;
-moz-box-shadow: 0px 1px 5px 1px #000;
-webkit-box-shadow: 0px 1px 5px 1px #000;
box-shadow: 0px 1px 5px 1px #000;
border-bottom: 1px solid yellow;
font-family: fantasy;
/*This shadowbox is perfect to simulate floating on the bottom of a box */
}
these links do not work with hover
#loginButton {
bottom: 1%;
left: .5%;
position: absolute;
float: right;
text-decoration: none;
font-size: 12px;
max-width: 100%;
max-height: 100%;
}
#loginButton a {
color: green;
}
#loginButton a:visited {
color:black;
}
#loginButton a:hover {
color: yellow;
}
#registerButton {
bottom: 1%;
left: 3%;
position: absolute;
float: left;
text-decoration: none;
color: white;
font-size: 12px;
}
#registerButton a, a:visited {
color: white;
}
#registerButton a:hover {
color: yellow;
}
this link does work with hover
#centerIntro {
margin: inherit;
margin-top: 3%;
text-align: center;
-moz-box-shadow: 0px 1px 5px 1px #000;
-webkit-box-shadow: 0px 1px 5px 1px #000;
box-shadow: 0px 1px 5px 1px #000;
border: 1px solid yellow;
font-family: fantasy;
font-size: 20px;
color: white;
text-decoration: none;
text-shadow: 2px 0px 7px rgba(0, 0, 0, 1);
background-color: cornflowerblue;
border-radius: 1%;
width: 1000px;
max-width: 50%;
}
#centerIntro a, a:visited {
color: white;
}
#centerIntro a:hover {
color: yellow;
}
HTML
<header>
<img id="headerTitle" src="images/headerTSC.png" alt="The Stream Crate title">
<div>Login</div>
<div>Register</div>
</header>
Any ideas?

Answer 1

There's a few thing wrong here.
First, your selectors are wrong:
You have this markup:
<a id="loginButton" ...
And you're attempting to apply styles to it using this selector:
#loginButton a { ... }
That selector doesn't match that link. It would match an <a> tag nested inside any other element that had a id="loginButton", but it will not match an <a> tag whose id is loginButton.
You need to simply apply the styles to #loginButton and #loginButton:hover.
Also, you say...
I'm aware that a:hover has to come AFTER a, a:visited. I've got it set up that way.
That's wrong. That isn't how CSS selector precedence works. Order is important, but later selectors don't necessarily win just because they come later. In this case, a:hover is more specific, and it can come before or after a and it will still win.

Answer 2

Instead of
#loginButton a:hover {
color: yellow;
}
and
#registerButton a:hover {
color: yellow;
}
Try this, these buttons are already anchor elements so there is no need to add the "a" in the css
#loginButton:hover {
color: yellow;
}
and
#registerButton:hover {
color: yellow;
}
Here is an example of the buttons without the "a" references in the css
https://jsfiddle.net/41dha1p7/

Answer 3

Change your css
#loginButton a {
color: green;
}
to
#loginButton a:link {
color: green;
}
The same to #registrationButton.
The order also matters. It should be :link, :visited, :hover, and :active.