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足够的特异性。

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

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

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

导航栏。活动问题。

3 个答案: