Question

我正面临着当前项目的一些特定挑战：我使用Bootstrap 3并且我有几个菜单按钮，通过悬停应该出现一个多级下拉菜单。根据设计，按钮下方（悬停时）也应出现一个小三角形（指针箭头）。因此，为此我通过根据自己的需要稍微调整所需效果来使用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中尝试了几个选项 - 一切正常，除了我不能拥有这个＆＃39;箭头＆＃39;依然存在。按钮的悬停背景仍然存在，但箭头会返回。任何替代方法或想法都是受欢迎的，谢谢！

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

下拉菜单打开时，如何使（：hover：before）伪元素保持有效？

1 个答案: