如何在悬停时使头部容器的一部分改变颜色

Question

所以这是我现在正在使用的头部容器。

    <header>
<div class ="headcontainer">

<nav class ="links">
<a href="index.html">Home</a>
<a href="#">Page1</a>
<a href="#">page2</a>
</nav>

<nav class ="login">
<a href="login.html">Login</a>
<a href="#">page4</a>
</nav>
</div>
</header>

这是CSS部分：

.headcontainer {
    width: 960px;
    margin: auto;



header {

    width: 100%;
    height: 35px;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    background: #A7A7A7;

}

.links {
    float: left;
    text-align: left;
}


.links a {
float: left;
width: auto;
height: auto;
font-size: 16px;
color: #FFF;
font-weight: 600;
margin: 10px 0 0 15px;

}

基本上我可以在网站顶部点击不同的单词，基本上充当导航标题。所以基本上我有一条颜色为灰色的条纹作为背景，文本上有白色。像这样：

我想要做的是，当我将鼠标悬停在其中一个单词上时，它会将背景变为白色并使文本变为灰色而不是正方形中的单词。像这样：

我尝试了很多方法，但我无法让它发挥作用。非常感谢我能得到的任何帮助！感谢。

Answer 1

将此添加到您的css：

.links a:hover {
    background: white;
    color: gray;
}

Answer 2

您可以在元素上使用CSS：悬停选择器，然后将颜色和背景更改为您想要的任何内容Look here

或者您可以使用jQuery的.hover（）函数。 Look here

Answer 3

您可以使用jQuery完成此任务。

您的链接容器需要ID 当您将鼠标悬停在所选链接上时，需要应用onhover操作，这将触发jQuery操作来修改CSS。

一个好的起点是div background color, to change onhover，附带一个简短的jQuery函数来改变链接颜色。