Bestimmen Sie die Richtung der Mauseingabe basierend auf CSS

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 mouse , aber in CSS haben wir ähnlich auch :hover .

Der Selektor, den wir in dieser Frage verwenden müssen, ist :hover hover

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 :hover berühren, und die Berührung sollte in Pfeilrichtung ausgelöst werden. Dann können wir ein Objekt hinzufügen, das in Pfeilrichtung berührt werden kann, zum Beispiel:

<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

Detaillierte Erläuterung der Verwendung von MySQL-Profilen zur Analyse von langsamem SQL (Group Left Join ist effizienter als Unterabfrage)

Verwenden Sie ein Profil, um langsames SQL zu ana...

Eine kurze Diskussion über den Linux-Signalmechanismus

Inhaltsverzeichnis 1. Signalliste 1.1. Echtzeitsi...

Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren

<!DOCTYPE HEML PUBLIC> <html> <Kop...

So konfigurieren Sie eine VMware-Umgebung mit mehreren Knoten

Dieses Tutorial verwendet CentOS 7 64-Bit. Weisen...

CSS erzielt den Effekt, mehrere Elemente an beiden Enden in einer Box auszurichten

Das Anordnungslayout zum Ausrichten der beiden En...

Detaillierte Erklärung zur Verbindung mit einer MySQL-Datenbank mit Java in IntelliJ IDEA

1. MySQL-Datenbank herunterladen und installieren...

So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen

Standort / { Index Index.jsp; Proxy_next_upstream...

Tipps, um zu verhindern, dass andere meine Seite als meine Webseite speichern und kopieren

Heutzutage ist das Kopieren von Websites im Intern...

Docker und iptables sowie Implementierung von Netzwerkisolations- und Kommunikationsvorgängen im Bridge-Modus

Docker bietet mehrere Netzwerke wie Bridge, Host,...

Ubuntu20.04 VNC-Installation und Konfigurationsimplementierung

VNC ist ein Remote-Desktop-Protokoll. Befolgen Si...

So verwenden Sie boost.python, um die dynamische C++-Bibliothek unter Linux aufzurufen

Vorwort Vor Kurzem habe ich begonnen, Robot Frame...

Detaillierter Prozess zur Installation von Docker, zum Erstellen von Images, zum Laden und Ausführen von NodeJS-Programmen

Systemumgebung: Windows 7 1. Docker installieren ...

Eine kurze Diskussion über die drei Hauptprobleme von JS: Asynchronität und Single-Thread

Inhaltsverzeichnis Einzelner Thread asynchron Ein...

Lösung für die Nginx-Installation ohne Generierung des sbin-Verzeichnisses

Fehlerbeschreibung: 1. Nach der Installation von ...

So implementieren Sie ein horizontales Balkendiagramm mit Prozentangaben in E-Charts

Inhaltsverzeichnis Beispielcode Rendern Code-Anal...