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

Question

这是我现在使用的head容器。

    <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 :hover选择器，然后将颜色和背景更改为您想要的任何颜色Look here

或者，您可以使用jQuery的.hover()函数。Look here

Answer 3

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

您的链接容器将需要一个id。

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

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