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
CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation
Durch die Verwendung von Abkürzungen können Sie di...
Erstellen Sie Schritt für Schritt ein Dateiverwaltungssystem mit nginx+FastDFS
Inhaltsverzeichnis 1. Einführung in FastDFS 1. Ei...
Eine kurze Diskussion zu this.$store.state.xx.xx in Vue
Inhaltsverzeichnis Sehen Sie sich dies an.$store....
Mybatis + mysql verwendet gespeicherte Prozeduren, um Implementierungscode für Seriennummern zu generieren
Verwenden Sie gespeicherte Prozeduren, um Transak...
Lösungen für häufige Probleme bei der Verwendung von Elasticsearch
1. Die Verwendung mit Redis führt zu Startkonflik...
Detaillierte Erläuterung der Grundkonfiguration des automatisierten Testens von Vue-Jest
Inhaltsverzeichnis Installieren Konfiguration Häu...
So installieren Sie MySQL 8.0 in Docker
Umgebung: MacOS_Cetalina_10.15.1, Mysql8.0.18, Do...
So installieren Sie MySQL und Redis in Docker
Dieser Artikel basiert auf der CentOS 7.3-Systemu...
So installieren Sie Composer unter Linux
1. Laden Sie das Installationsskript - composer-s...
Zusammenfassung der grundlegenden Kenntnisse zur MySql-Datenbank
Inhaltsverzeichnis Grundlegende Datenbankvorgänge...
So installieren Sie den Vim-Editor unter Linux (Ubuntu 18.04)
Sie können das Desktopsystem von der offiziellen ...
So installieren Sie mehrere mysql5.7.19 (tar.gz)-Dateien unter Linux
Informationen zur ersten Installation der MySQL-5...
Detailliertes Beispiel für die Verwendung von useState in React
Verwendungsstatus useState fügt einer Komponente ...
Informationen zu VUEs Kompilierungsumfang und Slotumfang-Slotproblemen
Was sind Slots? Die Slot-Direktive ist v-slot, di...
Tomcat-Konfiguration und wie man ihn in Eclipse startet
Inhaltsverzeichnis So installieren und konfigurie...