7

我正在使用 Bootstrap 为导航栏中的一个选项卡构建一个下拉菜单。我正在尝试自定义它；但是，在我单击选项卡后，总是有这个蓝色框悬停在选项卡上。

如果我根本不单击选项卡就不会发生这种情况，但是在单击一次并将鼠标悬停在同一个选项卡上之后会发生这种情况。子菜单中也会发生同样的事情。

我尝试了不同的方法来覆盖 CSS，但它不起作用。这是我的导航栏代码。我该如何覆盖这个？

 <nav class="navbar">
        <div class="navbar-inner">
            <a href="#" class="brand"><div id="brand_font">Christina Yang</div></a>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-home"></i>home</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-comment"></i>blog</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-info-sign"></i>about</a></li>
                <li class="divider-vertical"></li>
                <li><a href="#" id="inner-color"><i class="icon-camera"></i>photography</a></li>
                <li class="divider-vertical"></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="inner-color">
                        <i class="icon-user"></i>connect
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">LinkedIn</a></li>
                        <li class="divider"></li>
                        <li><a href="#">contact</a></li>                                        
                    </ul>
                </li>
                <li class="divider-vertical"></li>
            </ul>
            </div>
        </div>
    </nav>

这是我在本节中的相关 CSS 工作。

 @media (max-width: 767px) {

  .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background-color: #009999;
    display: none;
    border: none;
    /*box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;*/
    color: #555555;
    text-decoration: none;
  }
} 
  @media (max-width: 767px) {
   .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
      background-color: #009999;
  }


}
  @media (max-width: 480px) {

 .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
    background-color: #009999;
  }

}


.dropdown-menu a:hover,.dropdown-menu a:focus{
  filter:none !important;
  -webkit-transition:background 1s ease;
  -moz-transition:background 1s ease;
  -o-transition:background 1s ease;
  transition:background 1s ease;
}

.dropdown-menu::after, .dropdown-menu::before{
   border:none !important;
}

@media (max-width: 979px) {


    .navbar .nav > li > .dropdown-menu:after {
        border: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: white;
        font-weight: normal;
        padding: 10px 10px 11px;
    }


    .dropdown-toggle > a:visited {
        border: none;
    display: none;
    box-shadow: none;

    } 

  .dropdown-toggle > a:active {
    border: none;
    display: none;
    box-shadow: none;

  } 

    .navbar .nav > li > a:hover {
        display: none;
    }

    .navbar .nav > li > a {
        font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    }


}
4

7 回答 7

3

CSSoutline: none;将起作用，并隐藏焦点上的蓝色框，

但请注意，这是 Chrome、FF 和 Safari 中的默认浏览器行为，会使视力不佳的人难以浏览您的网站。

您应该只将它添加到页面上的非导航元素。

于 2014-03-27T16:23:11.050 回答
1

不要更改 bootstrap.css。创建另一个 CSS 文件，您可以在其中覆盖它。

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a

将背景图像设置为无，将背景颜色设置为您想要的任何颜色。如果仍然无法正常工作，请使用 !important。

于 2020-05-12T11:13:47.453 回答
0

将 !important 添加到您要覆盖的 css 中。前任：

.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
    background-color: #009999 !important;
  }
于 2013-08-01T10:47:47.430 回答
0

尝试这个

.dropdown a {
background-color:#fff transparent !important; }

那可以从引导程序中重置下拉类

于 2013-10-16T21:19:34.183 回答
0

我在 bootstrap.css 中搜索了蓝色#007bff，发现当一个项目处于活动状态或被点击时的样式是：

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #007bff;
}

例如，您可以像这样覆盖它：

.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: red;
}

!important似乎不需要。

于 2020-04-21T20:36:31.957 回答
0

尝试将此 css 添加到您的a元素中：

a,
a:link,
a:hover,
a:visited,
a:active,
a:focus
  background-color: transparent;

这适用于引导程序的下拉菜单，也应该适用于您的情况。!important如果有必要，还可以添加一个属性。

请注意，您有4 个相同的 id，这看起来有点棘手。

于 2016-06-02T22:32:56.820 回答
0

对于 bootstrap 4，您可以简单地从元素中删除btncss 类。a然后整个事情将表现得像一个常规链接。链接的悬停效果也很烦人，这就是为什么我在这里将其添加到我的 css 文件中：

.dropdown-toggle:hover {
  color: black;
  text-decoration: none;
}

这会关闭链接元素的悬停效果。

于 2020-04-13T16:33:58.187 回答