JQLite로 CSS hover 드롭 다운 재설정

현재 기본 탐색 바에 드롭 다운 메뉴가있는 Angular SPA를 개발중인 프로젝트에 있습니다. 이 효과를 얻으려면 CSS : 호버 선택기를 사용하고 있습니다. 문제는이 드롭 다운 내에서 작업이 수행 될 때 다시 열 수있는 기능을 방해하지 않고 작업을 닫고 싶다는 것입니다. 예를 들어 사용자가이 드롭 다운 중 하나 (ui-sref가있는 내부 링크) 내에서 링크를 열면이 특정 상태로 이동하지만 드롭 다운은 마우스를 외부로 이동할 때까지 계속 볼 수 있습니다 (그리고 부분적으로 새로운 콘텐츠가 표시됨). 내부에서 작업을 수행 할 때 드롭 다운을 닫고 사용자가 다시 열려고하면 트리거를 통해 마우스를 다시 가리킬 수 있습니다.JQLite로 CSS hover 드롭 다운 재설정

클래스 삭제 및 다시 추가를 시도했지만 시간 초과 후 다시 시도했지만 드롭 다운이 다시 나타납니다. https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview

그리고 관련 부분을 (각도 컨트롤러가 더 내용이 없습니다 생략) :

HTML :

<div class="hoverable has-dropdown"> 
    <button class="dropdown-trigger">Hover me!</button> 
    <div class="dropdown"> 
    Dropdown content 
    <button ng-click="buttonAction()">Action</button> 
    </div> 
</div>

을 우리가 달성하려고하는 것과 비슷한 설정을 가진 Plunker에

는

링크

CSS :

.dropdown { 
    display: none; 
    position: absolute; 
    top: 20px; 
    width: 100px; 
    height: 100px; 
    background: lightgrey; 
    padding: 1em; 
} 

.has-dropdown { 
    position: relative; 
    height: 20px; 
} 

.has-dropdown .dropdown-trigger:hover + .dropdown, 
.has-dropdown .dropdown-trigger + .dropdown:hover { 
    display: block; 
}

감사합니다!

출처

2016-08-27 Rising Concupiscence