Question

我有一个引导菜单，在悬停时提供在线（利用插入边框）并用向上箭头替换向下箭头。但是，当我将鼠标悬停在下拉菜单上时，它会消失。我想在将鼠标悬停在下拉菜单上时保持这种状态。如果可能的话我想用CSS而不是JS。任何想法。

注意：我设法在将鼠标悬停在下拉菜单上时保持背景颜色。

这是截图。

这是HTML：

<nav class="navbar topmenu navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="header">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Login</a></li>
                    <li><a href="#">Register</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <img class="avatar" src="assets/img/avatar.png" alt="" /> <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">My Profile</a></li>
                            <li><a href="#">My Account</a></li>
                            <li><a href="#">Log Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

这是CSS：

.navbar {
  min-height: 50px;
  padding: 0 30px;
  border: 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
}
.navbar.topmenu {
  background: #454545;
  border-color: #e5e5e5;
  margin-bottom: 0;
  font-size: 12px;
  text-transform: uppercase;
}
.navbar.topmenu .navbar-nav > li {
  background: inherit;
}
.navbar.topmenu .navbar-nav > li:hover > a {
  color: #888;
}
.navbar.topmenu .navbar-nav > li:hover.dropdown > a {
  background-color: #333;
  zoom: 1;
  filter: alpha(opacity=60);
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.navbar.topmenu .navbar-nav > li > a {
  padding: 15px 7px;
  color: #888;
}
.navbar.topmenu .navbar-nav > li > a:hover {
  box-shadow: inset 0px 3px 0px 0px #e2e2e2;
  color: #999;
}
.navbar.topmenu .navbar-nav > li.dropdown a:hover i:before {
  color: #999;
  content: '\f106';
  font-family: 'FontAwesome';
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu {
  top: 51px;
  right: -1px;
  background: #212121;
  zoom: 1;
  filter: alpha(opacity=60);
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
  padding: 0;
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
  /* Link. */
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu:hover > ul.dropdown-menu {
  display: block;
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu > li > a {
  font-size: 12px;
  color: #ddd;
  min-width: 215px;
  border-bottom: 1px solid #444;
  padding: 10px 15px;
}
.navbar.topmenu .navbar-nav > li > .dropdown-menu > li > a:hover {
  color: #eee;
  background-color: inherit;
}
.navbar.topmenu ul.nav li.dropdown a > img.avatar {
  -webkit-border-radius: 100%;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 100%;
  -moz-background-clip: padding;
  border-radius: 100%;
  background-clip: padding-box;
  width: 25px;
  margin-top: -4px;
  margin-right: 6px;
}
.navbar.topmenu ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
}

Answer 1

当您在下拉菜单中单击时，引导程序会在li中添加一个“open”类，因此我们可以使用它。

而不是：

.navbar.topmenu .navbar-nav > li.dropdown a:hover i:before {
  color: #999;
  content: '\f106';
  font-family: 'FontAwesome';
}

使用：

.navbar.topmenu .navbar-nav > li.dropdown a:hover i:before,
.navbar.topmenu .navbar-nav > li.dropdown.open a i:before {
  color: #999;
  content: '\f106';
  font-family: 'FontAwesome';
}

Bootstrap Dropdown维持悬停状态

1 个答案: