Ich liebe die Herausforderung, etwas mit CSS zu erstellen, das ein Element verwendet, um ein anderes auszulösen. Es kann ziemlich kompliziert werden, Ihre Gedanken um alle beteiligten Teile zu wickeln und eine Möglichkeit zu finden, Ihren HTML-Code so zu steuern, dass er leicht in Ihrem CSS gesteuert werden kann.
Heute werden wir uns einer solchen Herausforderung stellen. Wir erstellen eine einfache Homepage, auf der Sie die Hintergrundbilder anhand des Links, den Sie in der Navigation überfahren, austauschen. Auf dem Weg erfahren Sie alles über die Idee von Remote Hovers und wie Sie sie in Ihren Projekten einsetzen können.
Kunststück
Wussten Sie, dass es nur mit CSS möglich ist, ein Element zu manipulieren, wenn ein Benutzer über ein völlig anderes Element fährt? Es ist ein bisschen knifflig, aber wenn Sie erst einmal fertig sind, können Sie einige wirklich coole Effekte erzielen.
Um zu sehen, wie das funktioniert, verwenden wir ein wirklich einfaches Beispiel. Stellen Sie sich vor, Sie haben den folgenden Code:
Während wir zuvor nur benachbarte Geschwister anvisiert haben, zielen wir jetzt auf alte Geschwister. Daher erhalten alle Bilder, die sich auf derselben Ebene des DOM-Baums wie unser Anker befinden, als Ergebnis des Schwebefluges eine Grenze.
Die Denkweise verändern
Gib nicht auf! Experimentieren ist, wo Bildung stattfindet.Damit diese Technik funktioniert, müssen die Elemente, mit denen wir arbeiten, aus der Perspektive des DOM-Baums eng miteinander verbunden sein. Insbesondere muss das Element, das Sie bearbeiten möchten, ein Geschwister oder ein Kind des Elements sein, über das Sie den Mauszeiger bewegen möchten. Sie können keinen Remote-Hover haben, bei dem Sie den DOM-Baum wieder hochklettern müssen.
Wenn Sie mit dem Erstellen von Projekten beginnen, die diese Technik verwenden, werden Sie feststellen, dass diese einfachen Regeln echte Kopfschmerzen verursachen können! Sie biegen und brechen das Format, das Sie normalerweise für die Strukturierung Ihres HTML-Codes verwenden, und lassen Sie kreativ denken, um herauszufinden, wie Sie Ihre Elemente genau so umstrukturieren können, dass die Remote-Hovers funktionieren.
Für das heutige Beispiel brauchte ich einige Versuche, um HTML und CSS richtig zu strukturieren, damit alles funktioniert. Aus Ihrer Sicht sieht es sehr einfach aus, weil ich es in der richtigen Reihenfolge auslege. Denken Sie jedoch daran, dass dies, wenn Sie dies in Ihren eigenen Projekten tun, viel Fummeln und Tweaking erfordert. Gib nicht auf! In Experimenten findet Bildung statt.
Was wir bauen
Der Artikel, den wir heute bauen, ist eine einfache Homepage. Die Navigation ist ein vertikales Menü auf der linken Seite und der Rest der Inhaltsbox wird von einem großen Bild übernommen.
Demo: Klicken Sie hier, um zu starten.
Nun, wenn dies alles ist, was wir tun würden, wäre der HTML-Code ziemlich einfach. Ein großes Div mit einem Hintergrundbild, das ein engeres Div mit weißem Hintergrund und einer ungeordneten Liste enthält. Wir möchten die Dinge jedoch etwas komplizierter machen. Wenn sich der Benutzer über einem Navigationslink befindet, muss sich das Hintergrundbild ändern.
Dies bedeutet, dass wir einen ganzen Stapel von Hintergrundbildern benötigen. Die Herausforderung besteht jedoch darin herauszufinden, wo diese Bilder im Markup platziert werden müssen, damit wir über einen Remote-Hover darauf zugreifen können. Mal sehen, wie es funktioniert.
Schritt 1: HTML
Für unseren HTML-Code benötigen wir einen Container, eine ungeordnete Liste innerhalb eines Nav-Elements, die in einem Container div eingeschlossen ist. Hier ist die Grundstruktur:
Wir möchten natürlich einen Text in unserer Navigation haben, damit wir diesen auch einfügen können. Beachten Sie auch, dass ich in eine Überschrift geworfen habe, um als Standortkennung zu dienen.
Lassen Sie uns zum Abschluss noch unsere Bilder hinzufügen. Wir möchten, dass jeder Link einem Bild entspricht. Dies erreichen Sie am besten, wenn Sie nach jedem Link ein Bild platzieren. Auf diese Weise können Sie diese Bilder steuern, wenn ein Link über dem Link angezeigt wird, indem Sie einen Geschwister-Selector wie oben verwenden. So sieht das in Aktion aus:
Dadurch wird sichergestellt, dass wir den linken weißen Balken haben, den wir wollen. Lassen Sie uns nun den Text und die Liste gestalten. Wir müssen das h1 und das ul anvisieren und dann ein paar grundlegende Stylings anwenden:
Jetzt, da wir das ul-Element formatiert haben, müssen wir die Textteile, die eigentlich alle Ankerelemente in Listenelementen sind, ausgraben und speziell gestalten. Richten Sie diese Elemente aus, legen Sie sie für das Blockieren fest, sodass Sie deren Abmessungen spezifisch festlegen können, und gestalten Sie sie wie folgt:
In Anbetracht der Art und Weise, in der unser Dokument strukturiert ist, können wir dieses Navigationselement oder die ungeordnete Liste nicht zu sehr verschieben. Daher müssen wir das erste Listenelement gezielt anvisieren, damit wir den Text an die richtige Stelle bringen können. Dies wird mit nth-child ausgeführt (nur IE9 und höher, verwenden Sie selectivizr für ältere Browser).
Schritt 5: Hover-Stile
Wie Sie im obigen Bild sehen können, sieht das Navigationsmenü jetzt perfekt aus.Leider tut es immer noch nichts! Keine Sorge, wir haben alles genau so eingerichtet, wie wir es brauchen. Ein paar Zeilen CSS genügen, um alles zum Leben zu erwecken.
Zuerst habe ich dem Text einen Hover-Effekt hinzugefügt, damit Sie visuelles Feedback erhalten, dass dort etwas passiert. Dies ist wichtig, um das Konzept zu veranschaulichen, dass das, was der Benutzer auf der linken Seite tut, die Fotos auf der rechten Seite beeinflusst.
Um alles abzuschließen, müssen wir nur noch warten, bis der Benutzer schwebt, und dann eines der Bilder außerhalb des Containers nehmen und über das Standardhintergrundbild ziehen. Beachten Sie, dass wir dies mit dem benachbarten Geschwisterkombinator tun, von dem wir zuvor erfahren haben. Dadurch wird sichergestellt, dass wir das spezifische Bild erfassen, das mit dem Anker verbunden ist, über dem der Mauszeiger positioniert ist.
Sehen Sie es in Aktion
Damit sind wir alle fertig! Jetzt ist es an der Zeit, die Früchte unserer Arbeit zu betrachten. Bewegen Sie den Mauszeiger über die Links in der Seitenleiste und beobachten Sie, wie sich das Hintergrundbild darauf auswirkt.
Demo: Klicken Sie hier, um zu starten.
Bauen Sie etwas auf
Inzwischen sollten Sie eine gute Vorstellung davon haben, wie Sie Remote-Schwebeflüge einsetzen, um ein paar ausgefallene CSS-Ereignisse zu starten. Denken Sie an etwas Cooles mit dieser Idee und bauen Sie es auf. Es scheint einfach zu sein, aber ich kann fast garantieren, dass Sie auf dem Weg in einige verwirrende Probleme geraten. Verweisen Sie einfach hierher, um zu sehen, wie es funktioniert, und stellen Sie sicher, dass Sie so lange bleiben, bis Sie es beherrschen!