悬停属性不适用于一个元素但在另一个元素上

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 { ... }

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

您只需将样式应用于#loginButton 和#loginButton:hover。

还有，你说...

我知道 a:hover 必须在 a, a:visited 之后。我是这样设置的。

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

Answer 2

代替

#loginButton a:hover {
    color: yellow;
}

和

#registerButton a:hover {
    color: yellow;
}

试试这个，这些按钮已经是锚元素，所以不需要在css中添加“a”

#loginButton:hover {
    color: yellow;
}

和

#registerButton:hover {
    color: yellow;
}

这是一个在 css 中没有“a”引用的按钮示例 https://jsfiddle.net/41dha1p7/

Answer 3

改变你的CSS

#loginButton a {
    color: green;
}

到

#loginButton a:link {
    color: green;
}

与#registrationButton 相同。 顺序也很重要。它应该是 :link、:visited、:hover 和 :active。