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

Schreiben Sie eine dynamische Uhr auf einer Webseite in HTML

Verwenden Sie HTML, um eine dynamische Web-Uhr zu...

Vue+Vant implementiert die obere Suchleiste

In diesem Artikelbeispiel wird der spezifische Co...

Problem beim Testen des nicht autorisierten Zugriffs auf Zookeeper

Inhaltsverzeichnis Vorwort Erkennen des geöffnete...

Eine kurze Analyse der Wissenspunkte zum Exportieren und Importieren von MySQL-Daten

Oft müssen wir lokale Datenbankdaten exportieren ...

JS Cross-Domain-XML – mit AS URLLoader

Kürzlich erhielt ich eine Anforderung für eine Fun...

Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers

Inhaltsverzeichnis 1. Einleitung 2. Grundkonzepte...

Verwendung des Linux-Befehls tr

1. Einleitung tr wird verwendet, um einen Textabs...

CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung

Die Bildintegrationstechnologie, die von YAHOO in...

Die tdwidth-Einstellung der Tabelle in mehreren Divs ist gleich und kann nicht ausgerichtet werden

Kürzlich habe ich festgestellt, dass selbst wenn d...

So stellen Sie Solidity-Smart-Contracts mit ethers.js bereit

Wenn Sie DApps auf Ethereum entwickelt haben, hab...

Beispielcode für die Konvertierung von MySQL-Zeilen und -Spalten

1. Nachfrage Wir haben drei Tabellen. Wir müssen ...

Front-End-KI-Schnitttipps (Erfahrung)

Das AI-Bildschneiden muss mit PS koordiniert werd...

js implementiert eine auf Canvas basierende Uhrkomponente

Canvas war schon immer ein unverzichtbares Tag-El...

7 Möglichkeiten zum Schreiben einer Vue v-for-Schleife

Inhaltsverzeichnis 1. Verwenden Sie in der v-for-...

Linux-Debugging-Tools, die sich Entwickler und Betreiber unbedingt ansehen sollten [Empfohlen]

Der Systemleistungsexperte Brendan D. Gregg hat s...