jquery - 如何制作 ( :hover:before) pseudo elements remain in effect while drop-down menu is open?

Question

我在当前元素中面临一些具体挑战:我使用的是 Bootstrap 3，我有几个菜单按钮，将鼠标悬停在应该出现的多级下拉菜单上。根据设计，一个小三 Angular 形(指针箭头)也应该出现在按钮下方(悬停时)。因此，为此我使用了 Ian Lunn's通过根据我自己的需要稍微调整所需的效果来获得悬停效果。这是标记:

<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 中尝试了几个选项 - 除了我不能保留这个“箭头”之外，一切都很好。按钮的悬停背景仍然存在，但箭头返回。 欢迎任何替代方法或想法， 谢谢!

Answer 1

Updated DEMO

.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;
}

.dropdown:hover .nav_lower_button,.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;
}
.dropdown:hover .bubble-bottom:before ,.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before .bubble-     bottom.bubbled_down {
bottom: -10px;
border-color: #ed1d48 transparent transparent transparent;
}