2016-04-04 10 views
0

Ich habe eine Navigationsleiste mit mehreren Ebenen. Jetzt versuche ich es möglich zu machen, dass die Eltern von li aktiv sind, wenn auch die li selbst aktiv ist.Active Parent CSS

Was ich habe: https://gyazo.com/32f1191aeaf1ec3ef312de2a029eddda

Wie Sie sehen können, die relations Tab ist jetzt aktiv. Also, was ich will, ist der Office-Tab, um auch die gleiche rote Farbe (nur ein Beispiel) zu haben.

Ich hoffe, es gibt eine CSS-Lösung, da ich weiß, dass es eine Lösung für den Zustand (li:hover > a) gibt. Ich benutze übrigens ein anklickbares Menü, deshalb füge ich .active Klassen zum angeklickten li hinzu.

Die aktive li wäre etwas wie: ul li ul li.active a { color: red }.

Vielen Dank im Voraus!

+1

Warum nicht '.active' zum übergeordneten' li' hinzufügen und dann die untergeordneten Elemente die Styles erben lassen? – Vucko

+0

Wie Vucko sagte, könnte dies ein CSS-only-Ansatz sein, und wie Animatio sagte, können Sie nicht das DOM auswählen, um solche Magie zu machen, brauchen Sie JavaScript. –

Antwort

1

In CSS ist es nur möglich, Regeln in der übergeordneten> untergeordneten Richtung festzulegen. Aber nicht Kind> Elternteil. Im aktuellen Fall können Sie Handler für Klicks auf Eltern und Kind festlegen, um aktive Klassen hinzuzufügen/zu entfernen. Dafür musst du JavaScript verwenden.

1

Css hat keinen Elternselektor. Du kannst das nicht tun. Verwende js.

Verwandte Themen