Bestimmen Sie die Richtung der Mauseingabe basierend auf CSS
|
In einer Front-End-Technologiegruppe sagte ein Gruppenmitglied zuvor, dass er während des Interviews auf ein Problem gestoßen sei. Der Interviewer forderte ihn auf, reines CSS zu verwenden, um eine DEMO zu implementieren, die die Bewegungsrichtung eines Objekts basierend auf der Position der Maus bestimmt. Die vorgegebene Ausgangsstruktur ist folgende:
<Stil>
Körper {
Polsterung: 2em;
Textausrichtung: zentriert;
}
.block {
Position: relativ;
Anzeige: Inline-Block;
Breite: 10em;
Höhe: 10em;
vertikale Ausrichtung: Mitte;
}
.block_inhalt {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100%;
Textausrichtung: zentriert;
Zeilenhöhe: 10em;
Hintergrund: #333;
Farbe: #FFF;
}
</Stil>
<p class="text">Bewegen Sie den Mauszeiger aus verschiedenen Richtungen über den folgenden Inhalt</p>
<p>↓</p>
<span>→ </span>
<div Klasse="Block">
<div Klasse="Blockinhalt">
Bewegen Sie mich über den Cursor!
</div>
</div>
<span>←</span>
<p>↑</p>Das Wirkungsdiagramm sieht wie folgt aus:
erreichen Sie stellen nur solche unpraktischen Fragen, die nichts mit dem Geschäft zu tun haben. Das ist so frustrierend. Wann wird Chinas Front-End wirklich auf die Beine kommen? Vielen Dank für die gute Frage. Ich werde mein Bestes tun, sie umzusetzen. Kann diese Funktionalität also wirklich mit reinem CSS erreicht werden? Die Antwort lautet ja. Lassen Sie uns zunächst die Idee genauer betrachten. CSS-Mausereignisse Zunächst einmal wissen wir anhand der Frage, dass diese die Verwendung einer Mausbedienung erfordert. In JS haben wir verschiedene Der Selektor, den wir in dieser Frage verwenden müssen, ist Bestimmen Sie die Richtung Kern der Frage ist die Funktion der Richtungsbeurteilung. Dem Titelbild nach zu urteilen, handelt es sich tatsächlich um eine Richtungsweisung, die uns sagt, dass wir mit der Maus in Richtung der vier Pfeile eingreifen sollen. Wenn wir es dann mit reinem CSS implementieren möchten, muss unsere Maus einen Tastenknoten berühren und eine bestimmte Leistung dieses Knotens muss in der Lage sein, diese Position darzustellen. Dies sind die beiden versteckten Bedingungen in der Frage. Versuchen wir also, es umzusetzen. Zuerst müssen wir diesen Schlüsselknoten über
<Stil>
.block_hoverer {
Position: absolut;
Breite: 100 %;
Höhe: 100%;
Z-Index: 1;
}
.block_hoverer:n-tes-Kind(1) {
Hintergrund: rot;
}
.block_hoverer:nth-child(2) {
Hintergrund: Limette;
}
.block_hoverer:nth-child(3) {
Hintergrund: orange;
}
.block_hoverer:nth-child(4) {
Hintergrund: blau;
}
</Stil>
<div Klasse="Block">
<div class="block_hoverer">Nach oben</div>
<div class="block_hoverer">Weiter</div>
<div class="block_hoverer">Links</div>
<div class="block_hoverer">Rechts</div>
<div Klasse="Blockinhalt">
Bewegen Sie mich über den Cursor!
</div>
</div>Die Wirkung ist wie folgt:
Wir können sehen, dass bis auf den rechten Block alles andere abgedeckt ist. Das ist normal. Als nächstes müssen wir diese Blöcke nur wieder an den Rand verschieben. Der Code lautet wie folgt:
.block_hoverer {
Position: absolut;
Z-Index: 1;
Breite: 100 %;
Höhe: 100%;
Übergang: alle 0,3 s mühelos;
}
.block_hoverer:n-tes-Kind(1) {
Hintergrund: rot;
oben: -90%;
}
.block_hoverer:nth-child(2) {
Hintergrund: Limette;
oben: 90%;
}
.block_hoverer:nth-child(3) {
Hintergrund: orange;
links: -90%;
}
.block_hoverer:nth-child(4) {
Hintergrund: blau;
links: 90%;
}Die Wirkung ist wie folgt:
Dann fügen wir den Übergang hinzu:
.block_hoverer {
Übergang: alle 0,3 s mühelos;
}
.block_hoverer:hover {
Deckkraft: 1;
oben: 0;
links: 0;
}Die Wirkung ist wie folgt:
Ein Schritt besteht darin, Folgendes zu verbergen:
.block {
Position: relativ;
Anzeige: Inline-Block;
Überlauf: versteckt;
Breite: 10em;
Höhe: 10em;
vertikale Ausrichtung: Mitte;
}
.block_hoverer {
Deckkraft: 0;
}
.block_hoverer:hover {
Deckkraft: 1;
}Die Wirkung ist wie folgt:
Der vollständige Code sieht also wie folgt aus:
<Stil>
Körper {
Polsterung: 2em;
Textausrichtung: zentriert;
}
.block {
Position: relativ;
Anzeige: Inline-Block;
Überlauf: versteckt;
Breite: 10em;
Höhe: 10em;
vertikale Ausrichtung: Mitte;
transformieren: übersetzenZ(0);
}
.block_hoverer {
Position: absolut;
Z-Index: 1;
Breite: 100 %;
Höhe: 100%;
Deckkraft: 0;
Übergang: alle 0,3 Sekunden mühelos;
}
.block_hoverer:n-tes-Kind(1) {
Hintergrund: rot;
oben: -90%;
}
.block_hoverer:nth-child(2) {
Hintergrund: Limette;
oben: 90%;
}
.block_hoverer:nth-child(3) {
Hintergrund: orange;
links: -90%;
}
.block_hoverer:nth-child(4) {
Hintergrund: blau;
links: 90%;
}
.block_hoverer:hover {
Deckkraft: 1;
oben: 0;
links: 0;
}
.block_inhalt {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100%;
Textausrichtung: zentriert;
Zeilenhöhe: 10em;
Hintergrund: #333;
Farbe: #FFF;
}
</Stil>
<Text>
<p class="text">Bewegen Sie den Mauszeiger aus verschiedenen Richtungen über den folgenden Inhalt</p>
<p>↓</p>
<span>→ </span>
<div Klasse="Block">
<div Klasse="block_hoverer">1</div>
<div Klasse="block_hoverer">2</div>
<div Klasse="block_hoverer">3</div>
<div Klasse="block_hoverer">4</div>
<div Klasse="Blockinhalt">
Bewegen Sie mich über den Cursor!
</div>
</div>
<span>←</span>
<p>↑</p>
</body> Für den vollen Effekt können Sie den Codepen von Yutou ansehen Dies ist das Ende dieses Artikels über die Bestimmung der Mauseingaberichtung basierend auf CSS. Weitere relevante CSS-Inhalte zur Mauseingaberichtung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Farbverlaufseffekt im HTML-Hintergrund durch CSS-Stil erreicht
>>: Häufige CSS-Fehler und Lösungen
Artikel empfehlen
Vue implementiert die Tabellenpaging-Funktion
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie Nginx zur Verwaltung einer domänenübergreifenden Vue-Entwicklungsumgebung
1. Nachfrage Der lokale Testdomänenname ist derse...
Hinzufügen und Löschen von Tabelleninformationen mit Javascript
Erste Schritte mit JavaScript JavaScript ist eine...
Der praktische Prozess des Login-Status-Managements im vuex-Projekt
Inhaltsverzeichnis Werkzeug: Anmeldeszenario: übe...
MySQL 5.7.17 Installations-Tutorial mit Lösungen für das Problem, dass der MySQL-Dienst nicht gestartet werden kann
Bei der .net-Entwicklung bin ich eher mit der SQL...
Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)
Ich habe viele Projekte geschrieben, bei denen de...
Beispiel für eine Vue-Datenanzeige auf einem großen Bildschirm
Um die Anforderungen effizient zu erfüllen und au...
JavaScript implementiert eine Eingabefeldkomponente
In diesem Artikelbeispiel wird der spezifische Co...
Einführung in die Verwendung gängiger Dockerfile-Befehle
Inhaltsverzeichnis 01 CMD 02 EINSTIEGSPUNKT 03 AR...
Detaillierte Beschreibung der Funktion von new in JS
Inhaltsverzeichnis 1. Beispiel 2. Erstelle 100 So...
Vue implementiert die Methode zur Anzeige des Prozentsatzes der Echart-Kreisdiagrammlegende
Dieser Artikel stellt hauptsächlich den Kreisdiag...
Natives JS-objektorientiertes Tippspiel
In diesem Artikel wird der spezifische Code des o...
Detaillierte Erläuterung der Implementierungsschritte von MySQL Dual-Machine Hot Standby und Load Balancing
Die MySQL-Datenbank verfügt nicht über einen inkr...
Zusammenfassung des MySQL Undo Log und Redo Log
Inhaltsverzeichnis Undo-Protokoll Erstellung und ...
Detaillierte Erläuterung der MySQL-Sicherung und -Wiederherstellung
Vorwort: In den vorherigen Artikeln wurde die Ver...