JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs
|
In diesem Artikel wird der spezifische Code für JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Manchmal wird dieser Seiteneffekt benötigt: Wenn die Maus über ein Element bewegt wird, wird ein Dropdown-Menü implementiert. Wenn die Maus vom Element wegbewegt wird, verschwindet das Dropdown-Menü. Umsetzungsideen 1. Eine Box besteht aus zwei Teilen, der untere Teil ist das Untermenü, das zuerst auf „Ausblenden“ eingestellt wird: Anzeige: keine; Codebeispiel
<!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>Bedienelement-Sina Dropdown-Menü</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
ul li {
Listenstil: keiner;
}
A {
Textdekoration: keine;
Farbe: #4c4c4c;
}
ein:schweben {
Farbe: #e88415;
}
.Kasten {
Breite: 80px;
Rand: 50px automatisch;
Schriftgröße: 14px;
Farbe: #4c4c4c;
}
.weibo {
Position: relativ;
Hintergrundfarbe: #fcfcfc;
}
.weibo ein {
Anzeige: Block;
Höhe: 40px;
Zeilenhöhe: 40px;
Polsterung links: 20px;
}
.ändern {
Farbe: #f9a74f;
Hintergrundfarbe: #edeef0;
}
ich {
Position: absolut;
oben: 50 %;
rechts: 15px;
Rand oben: -4px;
Breite: 5px;
Höhe: 5px;
Rahmen unten: 1px durchgehend orangerot;
Rahmen rechts: 1px durchgehend orangerot;
transformieren: drehen (45 Grad);
}
.weiboList {
Anzeige: keine;
}
.weiboList li a {
Anzeige: Block;
Breite: 80px;
Höhe: 33px;
Zeilenhöhe: 33px;
Polsterung links: 15px;
Rahmen unten: 1px durchgezogen #fecc5b;
Hintergrundfarbe: #fff;
}
.weiboList li a:hover {
Hintergrundfarbe: #fff5da;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<div class="weibo"><a href="#" >Weibo<i class="select"></i></a></div>
<ul Klasse="weiboList">
<li><a href="#" >Private Nachricht</a></li>
<li><a href="#" >Kommentare</a></li>
<li><a href="#" >@Ich</a></li>
</ul>
</div>
<Skript>
var box = document.querySelector('.box');
var weibo = document.querySelector('.weibo');
var weiboList = document.querySelector('.weiboList');
box.onmouseover = Funktion() {
weibo.className = "Weibo-Änderung"
weiboList.style.display = "Block";
}
box.onmouseout = Funktion() {
weibo.className = "weibo";
weiboList.style.display = "keine";
}
</Skript>
</body>
</html>Seiteneffekt:
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:
|
>>: Detailliertes Tutorial zur Konfiguration von Nginx für https-verschlüsselten Zugriff
Artikel empfehlen
Pygame-Code zum Erstellen eines Schlangenspiels
Inhaltsverzeichnis Verwendete Pygame-Funktionen E...
Data URI und MHTML Komplettlösung für alle Browser
Daten-URI Data URI ist ein durch RFC 2397 definie...
JS implementiert Layoutkonvertierung in Animation
Beim Schreiben von Animationen mit JS wird häufig...
Bringen Sie Ihnen bei, wie Sie die rekursive Methode von MySQL8 verwenden
Ich habe zuvor einen Artikel über rekursive Abfra...
Detaillierte Erklärung zum Schreiben und Verwenden von Makefile unter Linux
Inhaltsverzeichnis Makefile Makefile-Benennung un...
Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker
Vor Kurzem musste ich die Zoom-Videokonferenz tes...
Über das Problem der dynamischen Spleißen der SRC-Bildadresse von img in Vue
Werfen wir einen Blick auf das dynamische Spleiße...
Verzeichnisberechtigungen beim Erstellen eines Containers mit Docker
Als ich gestern ein Projekt schrieb, musste ich d...
Detaillierte Erläuterung der Anwendungsbeispiele für Vue-Router 4
Inhaltsverzeichnis 1. Installieren und erstellen ...
JavaScript zum Anzeigen und Ausblenden von Bildern
JavaScript zeigt und verbirgt Bilder. Zu Ihrer In...
So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz
Öffnen Sie den Editor für geplante Aufgaben. Cent...
Detaillierte Installation und Verwendung von Docker-Compose
Docker Compose ist ein Docker-Tool zum Definieren...
Detaillierte Erklärung der grundlegenden Verwendung des SSH-Befehls ssh-keygen
Die SSH-Public-Key-Authentifizierung ist eine der...
MySQL-Paket für Abfrage ist zu groß – Problem und Lösung
Problembeschreibung: Fehlermeldung: Ursache: com....
So lösen Sie das Problem der Zabbix-Überwachung, das aufgrund von PHP-Problemen zu verstümmelten chinesischen Zeichen in der grafischen Benutzeroberfläche führt
Lösen Sie das Problem der verstümmelten chinesisc...