0
我在当前的项目中遇到了一些具体的挑战：我使用Bootstrap 3，并且通过悬停多个下拉菜单来显示几个菜单按钮。根据设计，按钮下面还应该出现一个小三角形（指针箭头）（悬停时）。所以，为了达到这个目的，我使用了Ian Lunn's悬停效果，并根据我自己的需要稍微调整了所需的效果。这里的标记：下拉菜单打开时如何使（（：hover：before））伪元素保持有效？
<ul class="nav navbar-nav">
<li><button class="btn nav_lower_button">Participants</button></li>
<li><button class="btn nav_lower_button">Activities</button></li>
<li id="order" class="dropdown"><button id="place_order" class="btn nav_lower_button dropdown-toggle bubble-bottom" role="button" data-toggle="dropdown" role="button" aria-expanded="false">Partners</button>
<ul id="order_drop" class="dropdown-menu" role="menu">
<li><a href="#">Lorem Ipsum</a></li>
<li class="divider"></li>
<li><a href="#">Lorem Ipsum</a></li>
<li class="divider"></li>
<li><a href="#">Lorem Ipsum</a></li>
<li class="divider"></li>
<li><a href="#">Lorem Ipsum</a></li>
<li class="divider"></li>
<li><a href="#">Lorem Ipsum</a></li>
<li class="divider"></li>
</ul>
</ul>
而CSS部分：
.nav_lower_button {
background-color: transparent;
color: #fafafa;
font-family: "Open Sans", sans-serif;
font-size: 1.286em
font-weight: 600;
text-align: center;
border-color: transparent;
outline: none;
}
.nav_lower_button:hover, .nav_lower_button:focus {
background-color: #ed1d48;
color: #ffffff;
}
/* Bubble Bottom */
.bubble-bottom {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-bottom:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
border-style: solid;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-property: bottom;
transition-property: bottom;
left: calc(20% - 10px);
bottom: 0;
border-width: 10px 10px 0 10px;
border-color: transparent transparent transparent transparent;
}
.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before .bubble- bottom.bubbled_down {
bottom: -10px;
border-color: #ed1d48 transparent transparent transparent;
}
我不知道我怎么会保持这个指针箭头保持，而下拉是有效的。我需要它出现在悬停上（它实际上是这样做的），但是我希望它在下拉菜单打开时保持不变（但是当我将鼠标从按钮本身上移开时）。我已经尝试了jQuery中的几个选项 - 除了事实我无法保留这个“箭头”之外，一切正常。按钮的悬停背景仍然存在，但箭头返回。 欢迎任何替代方法或想法， 谢谢！