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

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

Artikel empfehlen

Wissenspunkte zum Prinzip der MySQL-Join-Abfrage

Mysql Join-Abfrage 1. Grundlegende Konzepte Verbi...

Was macht die MySQL-Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Lösung zum Erstellen mehrerer Datenbanken, wenn Docker PostgreSQL startet

1 Einleitung Im Artikel „PostgreSQL mit Docker st...

Einige „Fallstricke“ beim Upgrade der MySQL-Datenbank

Bei kommerziellen Datenbanken hat die Datenbankak...

Eine kurze Diskussion zur Verwendung von React.FC und React.Component

Inhaltsverzeichnis 1. Reagieren.FC<> 2. Kla...

JavaScript-Flusskontrolle (Verzweigung)

Inhaltsverzeichnis 1. Prozesskontrolle 2. Sequent...

So legen Sie die Speichergröße von Docker Tomcat fest

Wenn Sie Tomcat in Docker installieren, kann es b...

Detaillierte Erklärung der grundlegenden Verwendung des img-Bild-Tags in HTML/XHTML

Das Bild-Tag wird verwendet, um ein Bild auf eine...

Zusammenfassung der Ubuntu-Sicherungsmethoden (vier Typen)

Methode 1: Um Respin zu verwenden, folgen Sie die...

Detaillierte Einführung in das MySQL-Schlüsselwort Distinct

Einführung in die Verwendung des MySQL-Schlüsselw...

js genaue Berechnung

var numA = 0,1; var numB = 0,2; Alarm (Zahl A + Z...

Win10 Docker-Toolsbox-Tutorial zum Erstellen einer PHP-Entwicklungsumgebung

Bild herunterladen Docker-Pull MySQL:5.7 docker p...

So konfigurieren Sie die bidirektionale Zertifikatsüberprüfung auf dem Nginx-Proxyserver

Generieren einer Zertifikatskette Verwenden Sie d...

Detailliertes Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Centos7

1. Laden Sie das MySQL 5.7-Installationspaket von...

Chinesische Parameterbeschreibung und Verwendungsbeispiele für ffmpeg

1. Wenn ffmpeg Videodateien überträgt, können die...