/ / Drop-Down Trigger optisch "Aktiv" wie "Schweben" [Foundation 6] - zurb-foundation, zurb-foundation-6

Dropdown-Trigger optisch "Aktiv" wie "Schweben" [Foundation 6] - zurb-foundation, zurb-foundation-6

Sehen Sie sich den folgenden Code für ein einfaches Hover Dropdown-Fenster an:

<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 gerne hätte, ist, dass wenn dieWenn der Benutzer einen Inhalt in diesem Dropdown-Fenster anzeigt, 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 Bildbeispiel: Beispiel 1 Beispiel 2

Jeder Einblick, den Sie zur Verfügung stellen können, wäre sehr geschätzt.

Antworten:

1 für die Antwort № 1

Foundation hat Sie hier abgedeckt.

Wenn das .dropdown-pane (content wrapper) ist aktiv, der Button erhält die Klasse .hover (nicht zu verwechseln mit :hover Zustand).

Sie können also einfach bestimmte Stile hinzufügenKlasse (relativ zu Ihrer Schaltfläche, wenn Sie mehrere verschiedene Arten von Effekten in verschiedenen Szenarien wünschen). Sie müssten manuell sicherstellen, dass Ihre Foundation :hover abgestimmt auf dein neues .hover Zustand.

HTML (z.B.)

<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 oben) I "m manuell einstellen :hover und .hover weil ich einen Standard-F6-CSS-Build verwendet habe, der einen Satz hat :hover Zustand aber wenn du schon festgelegt hast :hover (z.B. green) Sie müssen es nicht neu einstellen.


0 für die Antwort № 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: schweben { Hier können Sie Stile hinzufügen }

oder

var Element = document.getElementByClassName (". Klassenname");

element.addClass (". classToAdd");