导航栏。活动问题。

Question

我有一个问题，当你将鼠标悬停在导航栏上的某个项目上时，它会将其更改为我已设置的.active类的颜色，当它在该页面上时，它只在红色上。

这就是它的样子当你将鼠标悬停在其他导航栏项目上时，如果你不将鼠标悬停在任何其他项目上，它就不会这样做。但悬停颜色是蓝色而不是红色。

这就是当你将鼠标悬停在某个项目上时的样子，而不是将鼠标悬停在另一个项目上时，它会将其更改为红色，并将当前的颜色悬停在蓝色上。

继承我的CSS正在制作.active class red：

li .active{
background: red;
color:#000;
}

这是制作胡佛蓝色的CSS

 .nav > li {
    position: relative;
    display: block; }
    .nav > li > a {
      position: relative;
      display: block;
      padding: 10px 14px; }
      .nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #3E50B4; }
    .nav > li.disabled > a {
      color: #777777; }
      .nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
        color: #777777;
        text-decoration: none;
        background-color: transparent;
        cursor: not-allowed; }
  .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #3E50B4;
    border-color: #393838; }

继承我的家庭导航栏的HTML。

<div class="collapse navbar-collapse col-md-8 col-sm-8 col-xs-12 smallmenu" id="myNavbar">
                        <ul class="nav navbar-nav navbar-right head_align">
                            <li class="text-white header_li">
                                <a href="index.php" class="active text-white mont font12">Home</a></li>

关于它为什么这样做的任何想法？先感谢您。

Answer 1

你的这部分css正在改变（#3E50B4）：

.nav > li > a:hover, .nav > li > a:focus {
        text-decoration: none;
        background-color: #3E50B4; }

如果您不希望悬停时颜色发生变化，请从css中排除此项。

如果您不想更改您的CSS，但希望您的红色设置覆盖所有其他，您可以在其上应用!important。

li .active{
    background: red !important;
    color:#000;
}

Answer 2

发生这种情况是因为您没有为活动链接悬停添加背景颜色。当你拥有锚的red类时应用背景颜色.active并将其悬停在下面。

.nav > li > a.active:hover, .nav > li > a.ative:focus {
    background: red; 
} 

Answer 3

看起来你正在使用bootstrap。当谈到css特异性时，Bootstrap有点霸道，并且你没有提供与li .active足够的特异性。

您需要匹配引导程序定义并确保您的定义在引导程序css包括之后：

.nav > li > a.active
{
    background: red;
    color:#000;
}

最简单的方法是找出为什么它没有按照你想要的方式使用浏览器开发工具（例如在Chrome中，选择元素然后选择Computed，过滤到背景，它会告诉你哪个规则正在创建效果）。