0

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

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

}

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

标题

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

标题悬停

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

4

3 回答 3

1

将此添加到您的CSS：

.links a:hover {
    background: white;
    color: gray;
}
于 2013-01-08T16:52:20.713 回答
0

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

或者你可以使用 jQuery 的 .hover() 函数。看这里

于 2013-01-08T16:51:38.327 回答
0

您可以使用 jQuery 完成此操作。

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

一个很好的起点是div 背景颜色，改变 onhover伴随着一个简短的 jQuery 函数来改变链接颜色。

于 2013-01-08T16:54:27.870 回答