JavaScript implementiert die Anzeige einer Dropdown-Box, wenn die Maus darüber bewegt wird

JavaScript implementiert die Anzeige einer Dropdown-Box, wenn die Maus darüber bewegt wird

In diesem Artikel wird der spezifische JavaScript-Code zur Anzeige des Dropdown-Felds, wenn die Maus darüber bewegt wird, als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Code:

<!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>Dokument</title>

    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        
        .nav {
            Rand: 100px automatisch;
            Breite: 500px;
        }
        
        .nav>li {
            schweben: links;
        }
        
        li {
            Listenstil: keiner;
        }
        
        A {
            Anzeige: Block;
            Textdekoration: keine;
            Farbe: grau;
            Höhe: 40px;
            Breite: 100px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 40px;
            Box-Größe: Rahmenbox;
        }
        
        .nav>li>a {
            Farbe: Schwarz;
        }
        
        .nav>li>a:hover {
            Hintergrundfarbe: hellgrau;
        }
        
        .nav>li>ul>li>a {
            /* Anzeige: keine; */
            Rand: 1px durchgehend orange;
            oberer Rand: keiner;
        }
        
        .nav>li>ul>li>a:hover {
            Hintergrundfarbe: hellgelb;
        }
        
        .nav>li>ul {
            Anzeige: keine;
        }
    </Stil>
</Kopf>

<Text>
    <ul Klasse="Navigation" ID=Navigation>
        <li>
            <a href="#" >Sina</a>
            <ul>
                <li><a href="#">Neuigkeiten</a> </li>
                <li><a href="#">Sport</a> </li>
                <li><a href="#">Neuigkeiten</a> </li>
                <li><a href="#">Leben</a> </li>
                <li><a href="#">Weibo</a> </li>
            </ul>
        </li>
        <li>
            <a href="#" >Sina</a>
            <ul>
                <li><a href="#">Neuigkeiten 1</a> </li>
                <li><a href="#">Sport 1</a> </li>
                <li><a href="#">Neuigkeiten 1</a> </li>
                <li><a href="#">Leben 1</a> </li>
                <li><a href="#">Weibo1</a> </li>
            </ul>
        </li>

        <li>
            <a href="#" >Sina</a>
            <ul>
                <li><a href="#">Neuigkeiten 2</a> </li>
                <li><a href="#">Sport 2</a> </li>
                <li><a href="#">Neuigkeiten 2</a> </li>
                <li><a href="#">Leben 2</a> </li>
                <li><a href="#">Weibo 2</a> </li>
            </ul>
        </li>


    </ul>

    <Skript>
        var heads = document.querySelectorAll('.nav>li');
        für (var i = 0; i < Köpfe.Länge; i++) {
            Köpfe[i].onmouseover = Funktion() {
                dies.children[1].style.display = "Block";
            }
            Köpfe[i].onmouseout = Funktion() {
                this.children[1].style.display = "keine";

            }
        }
    </Skript>
</body>

</html>

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:
  • Der von js erzeugte Dropdown-Box-Effekt, wenn die Maus angehalten wird

<<:  Erstellen Sie ein privates Docker-Warehouse (selbstsignierte Methode)

>>:  So verwenden Sie die Concat-Funktion in MySQL

Artikel empfehlen

Detaillierte Erklärung des Vue-Plugins

Zusammenfassen Dieser Artikel endet hier. Ich hof...

Verwenden von Puppeteer zum Implementieren der Screenshot-Funktion für Webseiten unter Linux (CentOS)

Bei der Installation von Puppeteer unter Linux kö...

Detaillierte Erklärung der Filter und Anweisungen in Vue

Inhaltsverzeichnis benutzerdefinierte Vue-Direkti...

So implementieren Sie die Kontrollkästchen- und Radioausrichtung

Nicht nur das Verhalten verschiedener Browser ist...

Vue implementiert Beispielcode zum Ziehen von Dateien vom Desktop auf eine Webseite (kann Bilder/Audio/Video anzeigen)

Wirkung Wenn Sie es verwenden, optimieren Sie bit...

960 Grid System – Grundprinzipien und Verwendung

Natürlich gibt es auch viele Leute, die die gegent...

Docker verwendet Busybox, um ein Basis-Image zu erstellen

Die erste Zeile eines Docker-Images beginnt mit e...

Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML

Ich beschäftige mich seit über einem Jahr mit Java...

Kostenloses Tutorial zur Installationskonfiguration der Version MySQL 5.7.18

MySQL wird in eine Installationsversion und eine ...

MySQL Master-Slave-Daten sind inkonsistent, Eingabeaufforderung: Slave_SQL_Running: Keine Lösung

Dieser Artikel beschreibt anhand eines Beispiels ...

Tutorial zum Erstellen einer VSCode+CMake+Clang+GCC-Umgebung unter Win10

Ich möchte C/C++ verwenden, um grundlegende Daten...

Tutorial zu XHTML-Webseiten

Dieser Artikel soll vor allem Anfängern einige gr...

Der Datenordner konnte während der Installation von mysql8.0.14.zip nicht automatisch erstellt werden. Der Dienst kann nicht gestartet werden.

Nachdem ich das System heute neu installiert hatt...

Anzeige der Tabellenliste für die Front-End-Anwendungsentwicklung von Vue Element

1. Effekt der Listenabfrageschnittstelle Bevor wi...

MySQL-Datenbankbeschränkungen und Prinzipien des Datentabellenentwurfs

Inhaltsverzeichnis 1. Datenbankbeschränkungen 1.1...