Question

当我将鼠标悬停在“登录和注册”按钮上时，它们不会变为黄色。当我将鼠标悬停在我的click-to-email-admin按钮上时，它会变为黄色。两个链接的代码相同。据我所知，没有什么能阻止两个按钮改变颜色。

我知道a：hover必须在a之后，a：访问过。我已经设置好了。

我的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>标记嵌套内部任何其他具有id="loginButton"的元素，但它与ID为{{1}的<a>标记不匹配}。

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

另外，你说......

我知道a：hover必须在a之后，a：访问过。我已经设置好了。

那是错的。这不是CSS选择器优先级的工作原理。订单很重要，但后来的选择者不一定会赢，因为他们来晚了。在这种情况下，#loginButton:hover更具体，可以在a:hover之前或之后出现，但仍然会获胜。

Answer 2

而不是

#loginButton a:hover {
    color: yellow;
}

和

#registerButton a:hover {
    color: yellow;
}

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

#loginButton:hover {
    color: yellow;
}

和

#registerButton:hover {
    color: yellow;
}

以下是没有＆＃34; a＆＃34;的按钮示例。 css中的引用 https://jsfiddle.net/41dha1p7/

Answer 3

更改你的CSS

#loginButton a {
    color: green;
}

到

#loginButton a:link {
    color: green;
}

与#registrationButton相同。订单也很重要。它应该是：link，：visited，：hover和：active。

悬停属性不在一个元素上，而在另一个元素上

3 个答案: