导航栏 .active 问题。答案

【问题标题】：Navigation bar .active issue.导航栏 .active 问题。
【发布时间】：2018-03-07 07:34:33
【问题描述】：

我遇到了一个问题，当您将鼠标悬停在导航栏上的某个项目上时，它会将其更改为我设置的 .active 类的颜色，当它在该页面上时它仅显示为红色。

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

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

这是我的 CSS 使 .active 类变为红色：

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>

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

【问题讨论】：

标签： jquery html css

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

【讨论】：

【解决方案2】：

这是因为您没有为活动链接悬停添加背景颜色。当你有 .active 类作为锚点时应用背景颜色 red 并将其悬停如下。

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

【讨论】：

【解决方案3】：

看起来您正在使用引导程序。当涉及到 css 特异性时，Bootstrap 有点霸道，而且您没有提供足够的特异性 li .active。

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

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

使用浏览器开发工具找出它为什么没有按照您希望的方式运行的最简单方法（例如，在 Chrome 中，选择元素，然后选择已计算，过滤到背景，它会告诉您哪个规则正在创建效果） .

【讨论】：