导航栏 - 活动状态、文本颜色有问题答案

【问题标题】：nav bar - having issues with active state, text color导航栏 - 活动状态、文本颜色有问题
【发布时间】：2017-01-28 06:26:33
【问题描述】：

导航栏有两个问题

1) 我无法更改文本颜色。尝试了 diff 十六进制值，没有用....如何更改文本颜色？

2) 我希望导航菜单项在悬停和处于活动状态时变为斜体（例如，当我在关于页面上时，“关于”是斜体。

我试过这个：

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

【问题讨论】：

加个sn-p或者贴出相关的html代码。
解决方案是否有效？

标签： html css

【解决方案1】：

对于文本颜色，你不能定位 li，锚的颜色会覆盖它。试试这样：

.nav li a { color: #A6A6A6; }

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

编辑：我没有正确理解“活动”状态问题。重读后，我想将您重定向到this topic，我认为这可以解决该问题。

【讨论】：

【解决方案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>

【讨论】：