Question

导航条有2个问题

1）我无法改变文字颜色。尝试差异十六进制值，没有工作....如何更改文本颜色？

2）我希望导航菜单项在悬停和活动状态时更改为斜体（例如，当我在关于页面时，＆＃34;关于＆＃34;是斜体。

我试过了：

#nav li a:hover {
font-style: italic;
}

#nav li a:active {
font-style: italic;
}

但是^没有做任何事情。

当我尝试以下操作时：

a:hover, a:active { 
font-style: italic;

}

文本在悬停时会变为斜体，但不会在活动状态下变为斜体。此外，我只想将悬停/活动状态效果的斜体应用于导航栏项目，而不是其他链接，因此这也不会起作用。

非常感谢您的帮助!!

.nav {
height:         58px;
margin:         0;
margin-left:    0px;
width:          100%;

}

.nav ul {
position:       absolute;
right:          0px;
height:         0px;
display:        block;
font-family:    "Adobe Garamond Pro"; 
list-style:     none;
margin:         0;
padding:        21px 40px;
color: #A6A6A6 !important; 
} 

.nav li {
font-size:  19px;
float:      left;
color: #A6A6A6 !important; 
margin-left:40px;
font-family:    "Adobe Garamond Pro"; 
width: 58px;
}

#nav li a:hover {
font-style: italic;
}

#nav li a:active {
font-style: italic;
}

也是html

<ul>
<li class="nav-work"><a href="/">Work</a></li>
<li class="nav-about"><a href="/about.html">About</a></li>
<li class="nav-contact"><a href="/contact.html">Contact</a></li>
</ul>

Answer 1

对于文本颜色，您无法定位li，锚点的颜色将覆盖它。试试这样：

.nav li a { color: #A6A6A6; }

对于活动状态，“活动”将不起作用。活动样式仅在单击元素时应用。您必须自定义代码页面，以便其导航样式与正确的页面对齐，或者您可以

编辑：我没有正确理解'活跃'状态问题。重新阅读后，我想将您重定向到我认为可以解决该问题的this topic。

Answer 2

您应添加class，让css知道哪个菜单项为active。可以使用jQuery

完成

这是你可以使用的jQuery：

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

并添加此项以更改活动菜单项的颜色：

li.active a {
color: #ff0000;
}

以下是完整的工作示例：

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

ul {
position:       absolute;
right:          0px;
height:         0px;
display:        block;
font-family:    "Adobe Garamond Pro"; 
list-style:     none;
margin:         0;
padding:        21px 40px;
color: #A6A6A6 !important; 
} 

 li {
font-size:  19px;
float:      left;
color: #A6A6A6 !important; 
margin-left:40px;
font-family:    "Adobe Garamond Pro"; 
width: 58px;
}

li a:hover {
font-style: italic;
}

li.active a {
font-style: italic !important;
background: #e1e1e1;
padding:10px 15px;
color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="nav-work active"><a href="/">Work</a></li>
<li class="nav-about"><a href="/about.html">About</a></li>
<li class="nav-contact"><a href="/contact.html">Contact</a></li>
</ul>

导航栏 - 存在活动状态，文本颜色问题

2 个答案: