드롭 다운 트리거 시각적으로 "활성", "호버"[재단 6]과 같이

Question

기본 호버 드롭 - 창에 아래의 코드를 참조하십시오 : 이제

<button class="button" type="button" data-toggle="example">Toggle Dropdown</button> 

<div class="dropdown-pane" id="example" data-dropdown data-dropdown data-hover="true" data-hover-pane="true"> 
    <div class="row"> 
     <div class="medium-12 columns"> 
      <p>When I am hovering over any content in this dropdown-pane, how can I make the above button appear as "active" i.e. Same state as hovering over the button.</p> 
     </div> 
    </div> 
</div> 

나는 일이하고 싶은 것을하는 경우 사용자가 해당 드롭 다운 창 내의 모든 내용을보고있는 경우 이벤트를 트리거 한 단추는 "활성"트리거라는 시각적 표시기가 있습니다. 당신이 제공 할 수있는 모든 통찰력은 매우 극명하게 될 것이다

: 다음 그림의 예입니다.

Answer 1

재단에서 여기서 다루었습니다.

.dropdown-pane (내용 래퍼)이 활성화되어있는 경우 버튼에 .hover 클래스가 부여됩니다 (:hover 상태와 혼동하지 마세요).

다른 시나리오에서 여러 유형의 효과를 원할 경우 버튼에 상대적으로 해당 클래스에 특정 스타일을 간단하게 추가 할 수 있습니다. 재단 :hover이 새로운 .hover 주와 일치하는지 수동으로 확인해야합니다. 내가 수동으로 I 때문에 :hover 및 .hover을 설정하고 있습니다 (위) https://jsfiddle.net/tymothytym/8re4jcy0/ <이 예에서는 < :

.button.hover, 
.button:hover{ 
    background-color: green; 
} 

작업을 예를

HTML (예)

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button> 
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true"> 
    Example form in a dropdown. 
    <form> 
    <div class="row"> 
     <div class="medium-6 columns"> 
     <label>Name 
      <input type="text" placeholder="Kirk, James T."> 
     </label> 
     </div> 
     <div class="medium-6 columns"> 
     <label>Rank 
      <input type="text" placeholder="Captain"> 
     </label> 
     </div> 
    </div> 
    </form> 
</div> 


<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button> 
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true"> 
    Just some junk that needs to be said. Or not. Your choice. 
</div> 

CSS 기본 F6 CSS 빌드를 사용했습니다.이 빌드는 :hover 상태로 설정되어 있지만, 준비 세트 :hover (예 : ~ green) 다시 설정할 필요가 없습니다.

Answer 2

CSS를 사용하십시오. 마우스 오버 버튼의 스타일을 찾고 : 호버 (hover) 의사 클래스를 만들고 그런 식으로 스타일을 적용하거나 자바 스크립트를 사용하여 마우스 오버 버튼과 정확히 일치하는 CSS를 갖는 클래스를 요소에 추가 할 수 있습니다.

.element : 가져가 {여기 추가 스타일}

또는

VAR 요소 = document.getElementByClassName ('클래스 이름.');

element.addClass ('.classToAdd');