0
현재 프로젝트에서 몇 가지 구체적인 과제에 직면하고 있습니다. 저는 부트 스트랩 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에서 몇 가지 옵션을 시도했다. -이 '화살표'를 남겨 둘 수 없다는 사실 외는 모든 것이 잘 동작한다. 버튼의 마우스를 올리면 배경이 그대로 유지되지만 화살표가 돌아갑니다. 대체 방법이나 아이디어를 환영합니다. 고마워요!