Natives JS zur Implementierung eines Hover-Dropdown-Menüs

JS implementiert ein Hover-Dropdown-Menü. Dies ist eine Szenariofrage, die in Front-End-Interviews gestellt wird. Das Prinzip besteht darin, den Attributwert des Anzeigeattributs des Menüstils von none=>block zu ändern. Die spezifische Implementierung wird unten gezeigt. Konzentrieren Sie sich auf die folgenden Teile.

Legen Sie für jeden Abschnitt den Float fest.
Legen Sie vererbbare Eigenschaften für das übergeordnete Abschnittsfeld und schriftartbezogene Eigenschaften fest.
Wenn Sie den Hover einstellen, bewegen Sie den Mauszeiger über das übergeordnete Feld des Abschnitts. Der Hintergrund des untergeordneten Elementkopfs ändert sich. Sie können den Mauszeiger auch direkt über die Kopfklasse bewegen und `.head:hover` schreiben. Es entsteht jedoch das Problem, dass der Kopf zu seinem ursprünglichen Erscheinungsbild zurückkehrt, wenn die Maus über „li“ bewegt wird. Daher wird empfohlen, den Hover auf den Abschnitt zu setzen.
Das Menü kann allerdings nur angezeigt werden, wenn man mit der Maus über den Abschnitt der übergeordneten Box fährt, da es selbst nicht angezeigt wird (es kann nicht über den Kopf gefahren werden, da der Kopf keine übergeordnete Box ist).

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dropdown-Menü per Mauszeiger anzeigen</title>
    <Stil>
 
        /* Entfernen Sie ggf. vorhandene Stile für Platzhalter, a und li*/
        
        * {
            Rand: 0;
            Polsterung: 0;
        }
        
        A {
            Textdekoration: keine;
            Farbe: Schwarz;
        }
 
        /*li entfernt hier nur den vorhandenen Stil ohne Angabe der Breite*/
        
        li {
            Listenstil: keiner;
        }
 
        /* Flexibles Layout jedes Abschnitts als Element */
        
        .container {
            Rand: 50px automatisch;
            Breite: 40%;
            Höhe: 40px;
            Anzeige: Flex;
            /* raumgleichmäßig zuerst gesehen*/
            Inhalt ausrichten: gleichmäßiger Abstand;
            Hintergrundfarbe: himmelblau;
        }
 
        /* Floating muss nur in jedem Abschnitt durchgeführt werden*/
        /* „Schriftgröße, Textausrichtung und Zeilenhöhe“ für Abschnitt festlegen => vererbbare Eigenschaften*/
        
        .Abschnitt {
            schweben: links;
            Schriftgröße: 16px;
            Zeilenhöhe: 40px;
            Textausrichtung: zentriert;
        }
 
        /*Hier wird der Stil des Kopfes beim Hovern festgelegt*/
        /* Kann auch als .head:hover geschrieben werden */
 
        .Abschnitt:Hover .Kopf {
            Farbe: weiß;
            Hintergrundfarbe: orange;
        }
 
        /* Das gesamte Menü ist zunächst unsichtbar und der Stil ist festgelegt*/
        
        .Speisekarte {
            Anzeige: keine;
            Hintergrundfarbe: transparent;
        }
 
        /* Sie können das Menü sehen, nachdem Sie den Mauszeiger darüber bewegt haben. Sie können nur über das übergeordnete Feld fahren*/
        
        .Abschnitt:Hover .Menü {
            Anzeige: Block;
        }
 
        /* Gibt den Stil von li beim Hovern an*/
        
        .menu li:hover {
            Hintergrundfarbe: orange;
        }
    </Stil>
</Kopf>
 
<Text>
    <div Klasse="Container">
        <div Klasse="Abschnitt">
            <a href="#" class="head">Schreiben Sie einen Aufsatz</a>
            <ul Klasse="Menü">
                <li>Nach Informationen suchen</li>
                <li>Machen Sie sich Notizen</li>
                <li>Reproduzieren</li>
            </ul>
        </div>
        <div Klasse="Abschnitt">
            <a href="#" class="head">Front-End lernen</a>
            <ul Klasse="Menü">
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>LeetCode</li>
            </ul>
        </div>
        <div Klasse="Abschnitt">
            <a href="#" class="head">Kleine Tage</a>
            <ul Klasse="Menü">
                <li>Essen</li>
                <li>Schlaf</li>
                <li>Spielbohnen</li>
            </ul>
        </div>
    </div>
</body>
 
</html>

Der endgültige Effekt ist wie folgt.

Tipps: Es gibt eine weitere ähnliche Frage, nämlich die Implementierung eines Dropdown-Menüs durch Klicken. Der Unterschied besteht darin, dass Sie ein Klickereignis hinzufügen, es in JS schreiben und es später ergänzen müssen. Sie können die drei Abschnitte auch in der Form „ul li“ schreiben, sodass auch zwei verschachtelte ul-Ebenen mit besserer Semantik erreicht werden können, die als Referenz für die Leser dienen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Implementierungscode für JavaScript-Dropdown-Menüs
CSS+JS-Dropdown-Menü
js legt das standardmäßig ausgewählte Element im Dropdown-Menü dynamisch fest
JS-Implementierungscode für das dreistufige Dropdown-Menü
Ein JS-Implementierungscode für ein Datums-Dropdown-Menü
Echte mehrstufige Verknüpfungs-Dropdown-Menüklasse von JS. Einfache Realisierung des Verknüpfungsmenüs von Provinzen, Städten und Bezirken!
Beispiel für einen Js-Klick-Popup-Dropdown-Menüeffekt
Javascript imitiert den Sina-Spielekanal, um beim Bewegen der Maus einen Untermenüeffekt anzuzeigen
JavaScript-Mouse-Hover-Ereignis-Nutzungsanalyse
CSS oder JS, um ein anderes Element anzuzeigen, wenn die Maus darüber schwebt

<<: Probleme und Lösungen bei der Installation von Docker in der Alibaba Cloud

>>: Detaillierte Schritte zur Installation des NERDTree-Plugins in Vim unter Ubuntu

Vue implementiert einen einfachen Laufschrifteffekt

Natives JS zur Implementierung eines Hover-Dropdown-Menüs

Vue implementiert einen einfachen Laufschrifteffekt

Mybatis Paging-Plugin pageHelper - ausführliche Erklärung und einfaches Beispiel

Greifen Sie auf die MySQL-Datenbank zu, indem Sie unter Windows über cmd das DOS-Fenster aufrufen

Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen

CSS3 implementiert horizontale Zentrierung, vertikale Zentrierung, horizontale und vertikale Zentrierung Beispielcode

Klicken Sie auf den Ankerlink in JS, um reibungslos zu scrollen und die obere Position frei anzupassen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.16 (Ubuntu 16.04)

Beispiel für die Mosaikierung eines Bildes mit js

Vue ruft die PC-Kamera auf, um die Fotofunktion zu realisieren

So implementieren Sie die @person-Funktion über Vue

Artikel empfehlen

Detaillierte Erklärung mehrerer Möglichkeiten zum Entfernen der Lücke zwischen Inline-Blockelementen in CSS

HTML-Tutorial: Ungeordnete Liste

Lösung für die Ineffektivität der flexiblen Layoutbreite in CSS3

Detaillierte Schritte zum Erstellen, Ausführen, Veröffentlichen und erstmaligen Abrufen eines Docker-Images

JS-Funktionsaufruf, Anwenden und Binden einer superdetaillierten Methode

Detaillierte Erläuterung der Implementierungsprinzipien von call, apply und bind in JavaScript

JavaScript-Kreisdiagrammbeispiel

Lösung für die geringe Schreibeffizienz von unter AIX gemountetem NFS

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

Vue-Beispielcode für die Online-Vorschau von Office-Dateien

Detaillierte Erklärung zum Einrichten eines DNS-Servers unter Linux

Erläuterung der Zusammenführung von TypeScript-Namespaces

Best Practices für die Entwicklung von Amap-Anwendungen mit Vue

Detailliertes Beispiel zur Implementierung von Transaktions-Commit und -Rollback in MySQL

Beispielcode für CSS-Spalten zum Erreichen eines zweiseitig ausgerichteten Layouts