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: