Dropdown-Trigger Visuell "Aktiv" Like "Hover" [Foundation 6]

Question

den Code unten für einen grundlegenden Hover Dropdown-pane Siehe:

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

Nun, was ich möchte geschehen ist, dass, wenn der Benutzer Wenn Sie einen beliebigen Inhalt in diesem Dropdown-Fenster anzeigen, weist die Schaltfläche, die das Ereignis ausgelöst hat, einen visuellen Indikator auf, dass es sich um den Auslöser "aktiv" handelt. Hier ist ein Bild Beispiel:

Einsicht Sie bieten kann sehr geschätzt werden würde.

Answer 1

Stiftung hat Sie hier abgedeckt.

Wenn der .dropdown-pane (Content-Wrapper) aktiv ist, wird die Taste, um die Klasse gegeben .hover (nicht mit :hover Zustand zu verwechseln).

So können Sie einfach bestimmte Stile zu dieser Klasse hinzufügen (relativ zu Ihrer Schaltfläche, wenn Sie mehrere verschiedene Arten von Effekt in verschiedenen Szenarien wünschen). Sie müssten manuell sicherstellen, dass Ihre Foundation :hover Ihrem neuen .hover-Status entspricht.

HTML (zB)

<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

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

Arbeitsbeispiel: https://jsfiddle.net/tymothytym/8re4jcy0/ < < in diesem Beispiel (und höher) ich manuell :hover und .hover weil ich Einstellung habe einen Standard-F6-CSS-Build verwendet, der einen :hover -Status hat, aber wenn du al Fertigsatz :hover (z.B. zu green) müssen Sie es nicht neu einstellen.

Answer 2

Verwenden Sie css. Suchen Sie nach dem Stil der Schaltfläche "hovered over" und erstellen Sie entweder eine Pseudoklasse "h: hover" und wenden Sie den Stil auf diese Weise an oder Sie können Javascript verwenden, um dem Element, das genau die CSS-Schaltfläche hat, eine Klasse hinzuzufügen.

.Element: Hover { hinzufügen Stile hier }

oder

var element = document.getElementByClassName ('classname.');

element.addClass ('. ClassToAdd');