Question

我创建了一个带有自定义样式的导航栏，并且大多数情况下它运行良好。但是，我使用以下CSS将菜单/下拉项目的“悬停”颜色设置为绿色，虽然这大部分都有效，但如果我选择一个下拉菜单，则原始菜单项会显示绿色，直到我点击（并关闭下拉），此时它会在失去颜色之前闪烁浅灰色（默认情况下，我相信）。我不能为我的生活找出我所缺少的东西吗？

.rpfb-navbar .navbar-nav > li > a:hover,
.rpfb-navbar .navbar-nav > li > a:focus,
.rpfb-navbar .navbar-nav > .active > a,
.rpfb-navbar .navbar-nav > .active > a:hover,
.rpfb-navbar .navbar-nav > .active > a:focus,
.rpfb-navbar .open .dropdown-menu > li > a:hover,
.rpfb-navbar .open .dropdown-menu > li > a:focus,
.rpfb-navbar .open .dropdown-menu > .active > a,
.rpfb-navbar .open .dropdown-menu > .active > a:hover,
.rpfb-navbar .open .dropdown-menu > .active > a:focus {
    background-color: #a2cc3a;
    color: #fff;
}

Answer 1

.nav .open＆gt; a：焦点{background-color：transparent; / 或您想要的任何颜色 /}

Answer 2

那是因为你没有为“活跃”状态添加样式。试试这个：

.rpfb-navbar .navbar-nav > li > a:hover,
.rpfb-navbar .navbar-nav > li > a:focus,
.rpfb-navbar .navbar-nav > li > a:active,
.rpfb-navbar .navbar-nav > .active > a,
.rpfb-navbar .navbar-nav > .active > a:hover,
.rpfb-navbar .navbar-nav > .active > a:focus,
.rpfb-navbar .navbar-nav > .active > a:active,
.rpfb-navbar .open .dropdown-menu > li > a:hover,
.rpfb-navbar .open .dropdown-menu > li > a:focus,
.rpfb-navbar .open .dropdown-menu > li > a:active,
.rpfb-navbar .open .dropdown-menu > .active > a,
.rpfb-navbar .open .dropdown-menu > .active > a:hover,
.rpfb-navbar .open .dropdown-menu > .active > a:focus,
.rpfb-navbar .open .dropdown-menu > .active > a:active {
    background-color: #a2cc3a;
    color: #fff;
}

Answer 3

您可以在自定义时更改官方Bootstrap站点上的LESS变量中的下拉颜色。

@component-active-bg

是您需要编辑以更改背景颜色的变量。

@component-active-color

是编辑活动项目颜色的变量。

当我点击菜单时，Bootstrap 3下拉菜单悬停颜色恢复为默认值？

3 个答案: