Question

边框底部在自举导航栏上悬停时无法显示。我希望它在悬停时显示在导航栏中div的底部。

.navbar-inverse {
    background-color: white;
}
.navbar-inverse {
    border-color: green
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
    background-color: white;
    border-bottom: #0000EE;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
    background-color: #2BFF79
}
.dropdown-menu {
    background-color: #FFFFFF
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: green;
}
.navbar-inverse {
    background-image: none;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-image: none;
}
.navbar-inverse .navbar-brand {
    color: #FFFFFF
}
.navbar-inverse .navbar-brand:hover {
    color: #FFFFFF
}
.navbar-inverse .navbar-nav>li>a {
    color: green;
    font-size: 17px;
    font-family: "Arial Narrow", Helvetica, sans-serif;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
    color: green;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
    color: #FFFFFF;
}
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus {
    color: #FFFFFF;
}
.dropdown-menu>li>a {
    color: #333333
}
.navbar-bottom {
    background-color: green;
}
.navbar-fixed-bottom {
    background-color: green;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
    background-color: white;
    font-size: 25px;
    font-family: "Agency FB";
}
ul.nav li.dropdown:hover > ul.dropdown-menu a {
    color: green;
}

Answer 1

您需要使用border-bottom-color或border-bottom

如果已经提供了border-style和border-width，

.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
    background-color: white;
    border-bottom-color: #0000EE;
}

否则

.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
    background-color: white;
    border-bottom: 1px solid #0000EE;
}

在bootstrap导航栏上悬停时，边框底部不会显示

1 个答案: