html - 悬停属性不适用于一个元素但适用于另一个元素

Question

当我将鼠标悬停在“登录”和“注册”按钮上时，它们不会变成黄色。当我将鼠标悬停在我的点击电子邮件管理按钮上时，它变成黄色。两个链接的代码相同。据我所知，没有什么能阻止这两个按钮改变颜色。

我知道 a:hover 必须在 a, a:visited 之后出现。我已经这样设置了。

我的 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    */

                 }

这些链接不适用于悬停

#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;
}

此链接确实适用于悬停

#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">
    <a href="source/login.php" id="loginButton"><div>Login</div></a>
<a href="source/register.php" id="registerButton"><div>Register</div></a>

</header>

有什么想法吗？

Answer 1

这里有一些问题。

首先，您的选择器是错误的:

你有这个标记:

<a id="loginButton" ...

并且您正在尝试使用此选择器将样式应用于它:

#loginButton a { ... }

该选择器与该链接不匹配。它会匹配 <a>标记嵌套在 inside 任何其他具有 id="loginButton" 的元素中, 但它不会匹配 <a> id为loginButton的标签.

您只需将样式应用到 #loginButton和 #loginButton:hover .

另外，你说...

I'm aware that a:hover has to come AFTER a, a:visited. I've got it set up that way.

这是错误的。这不是 CSS 选择器优先级的工作原理。顺序很重要，但后来的选择者并不一定会因为他们来得晚而获胜。在这种情况下，a:hover更具体，可以在a之前或之后它仍然会赢。