In diesem Artikel wird der spezifische Code von js zur Realisierung des Inhaltswechsels der Maus in die Karte und aus ihr heraus zu Ihrer Information freigegeben. Der spezifische Inhalt ist wie folgt Falldynamisches Wirkungsdiagramm: HTML Quelltext: <div Klasse="Sport-Purple"> <div Klasse="alle"> <!-- Inhalt --> <div Klasse="Inhalt"> <div Klasse="erster-Block"> <!-- Seitenleiste für Inhalte --> <div Klasse="beiseite"> <h2>Kategorien</h2> <ul Klasse="lis"> <li Klasse="sna"> <a href="#">Turnschuhe</a> <div id="sub"> <div><a href="#">Laufschuhe</a></div> <div><a href="#">Basketballschuhe</a></div> <div><a href="#">Fußballschuhe</a></div> <div><a href="#">Wanderschuhe</a></div> <div><a href="#">Skateboardschuhe</a></div> <div><a href="#">Tanzschuhe</a></div> <div><a href="#">Tennisschuhe</a></div> <div><a href="#">Fahrradschuhe</a></div> <div><a href="#">Wanderschuhe</a></div> <div><a href="#">Golfschuhe</a></div> </div> </li> <li Klasse="sna"> <a href="#">Sportbekleidung</a> <div id="sup"> <div><a href="#">Jacken</a></div> <div><a href="#">Basisschichten</a></div> <div><a href="#">Hemden</a></div> <div><a href="#">Sets/Anzüge</a></div> </div> </li> <li Klasse="sna"> <a href="#">Radfahren</a> <div id="cyc"> <div><a href="#">Fahrrad</a></div> <div><a href="#">Fahrradteile</a></div> <div><a href="#">Fahrradzubehör</a></div> <div><a href="#">Fahrradreparaturwerkzeuge</a></div> <div><a href="#">Fahrradbekleidung</a></div> <div><a href="#">Fahrradschuhe</a></div> <div><a href="#">Elektrofahrrad</a></div> <div><a href="#">Teil für Elektrofahrräder</a></div> <div><a href="#">Selbstbalancierende Scooter</a></div> </div> </li> <li Klasse="sna"> <a href="#">Fertigstellung</a> <div id="Ende"> <div><a href="#">Angelruten</a></div> <div><a href="#">Angelrollen</a></div> <div><a href="#">Rutenkombination</a></div> <div><a href="#">Angelköder</a></div> <div><a href="#">Angelschnüre</a></div> <div><a href="#">Angelhaken</a></div> <div><a href="#">Angelkisten</a></div> <div><a href="#">Angelpose</a></div> <div><a href="#">Fischernetz</a></div> <div><a href="#">Angelseil</a></div> </div> </li> <li Klasse="sna"> <a href="#">Jagd</a> <div id="hun"> <div><a href="#">Pfeil und Bogen</a></div> <div><a href="#">Jagdoptik</a></div> <div><a href="#">Jagdkameras</a></div> <div><a href="#">Waffenlichter</a></div> <div><a href="#">Jagdtaschen und Holster</a></div> <div><a href="#">Jagdmesser</a></div> <div><a href="#">Jagdlichter</a></div> <div><a href="#">Jagdattrappe</a></div> <div><a href="#">Zubehör für Jagdwaffen</a></div> <div><a href="#">Zielfernrohrmontagen und Zubehör</a></div> </div> </li> <li Klasse="sna"> <a href="#">Camping & Wandern</a> <div id="Kamera"> <div><a href="#">Zelte</a></div> <div><a href="#">Sonnenschutz</a></div> <div><a href="#">Schlafsäcke</a></div> <div><a href="#">Klettertaschen</a></div> <div><a href="#">Outdoor-Kocher</a></div> <div><a href="#">Outdoor-Geschirr</a></div> <div><a href="#">Picknicktaschen</a></div> <div><a href="#">Wasserbeutel</a></div> <div><a href="#">Isomatte</a></div> <div><a href="#">Außenbeleuchtung</a></div> </div> </li> <li Klasse="sna"> <a href="#">Fitness und Bodybuilding</a> <div id="passen"> <div><a href="#">Fitnessgeräte</a></div> <div><a href="#">Outdoor-Fitnessgeräte</a></div> <div><a href="#">Boxen</a></div> <div><a href="#">Yoga</a></div> <div><a href="#">Gymnastik</a></div> <div><a href="#">Kampfsport</a></div> <div><a href="#">Gewichtheben</a></div> <div><a href="#">Gewichtheberhandschuhe</a></div> <div><a href="#">Fitnesshandschuhe</a></div> <div><a href="#">Tanzschuhe</a></div> </div> </li> <li Klasse="sna"> <a href="#">Musikinstrumente</a> <div id="mus"> <div><a href="#">Gitarre</a></div> <div><a href="#">Gitarrenteile und Zubehör</a></div> <div><a href="#">Violine</a></div> <div><a href="#">Geigenteile und Zubehör</a></div> <div><a href="#">Holzblasinstrumente</a></div> <div><a href="#">Schlaginstrumente</a></div> <div><a href="#">Instrumententaschen und -koffer</a></div> <div><a href="#">Blechblasinstrumente</a></div> <div><a href="#">Tasteninstrumente</a></div> </div> </li> </ul> <div Klasse="flip"> <a href="#"class="Seite nach unten"> <img src="../images/arrow.png"> </a> <a href="#"class="Seite Seite nach oben"> <img src="../images/arrow.png"> </a> <div Klasse="Schwanz"> 1/3 </div> </div> </div> </div> </div> </div> </div> </div> CSS: *{ Rand: 0; Polsterung: 0; } A{ Textdekoration: keine; } li{ Listenstil: keiner; } .sports-lila{ Breite: 100 %; Hintergrundfarbe: #EEEEEE; Position: relativ; Polsterung oben: 10px; } /* Stil für den Beginn der Inhaltsseitenleiste */ .erster-block{ Breite: 100 %; Höhe: 500px; } .beiseite{ Breite: 280px; Höhe: 465px; Hintergrundfarbe: #FFFFFF; Rand links: 150px; } .beiseite h2{ Farbe: #a059cb; Textausrichtung: links; Zeilenhöhe: 60px; Rahmen unten: 1px durchgezogen #A059CB; Schriftstärke: 400; Schriftgröße: 18px; Polsterung: 0 20px; } .lis li{ Rahmen unten: 1px durchgezogen #EEEEEE; Zeilenhöhe: 40px; Höhe: 40px; Rand: 0 20px 0 20px; } .lis li a{ Farbe: #000000; Schriftgröße: 13px; } .list a:hover,.lis li a:hover{ Farbe: #FF4500; Textdekoration: Unterstreichen; } .umdrehen{ Rand: 20px 0 20px 0px; Zeilenhöhe: 30px; } .umblättern .bildnachunten{ Breite: 30px; Höhe: 30px; Rahmenradius: 4px; Anzeige: Inline-Block; Rand: 1px durchgezogen #a5a5a5; Position: relativ; links: 20px; Überlauf: versteckt; Rand unten: 20px; } .flip .pagedown img{ Position: absolut; links: 10px; oben: 13px; } .umblättern .Seite nach oben{ Breite: 30px; Höhe: 30px; Rahmenradius: 4px; Anzeige: Inline-Block; Rand: 1px durchgezogen #a5a5a5; Position: relativ; links: 40px; Überlauf: versteckt; Rand unten: 20px; } .flip .pageup img{ Position: absolut; links: -30px; oben: -32px; } .umdrehen .tail{ schweben: rechts; Rand rechts: 130px; Schriftgröße: 12px; } #sub, #sup, #cyc, #fin, #hun, #cam, #fit, #mus Breite: 300px; Höhe: 403px; Position: absolut; links: 400px; oben: 70px; Schriftgröße: 13px; Rand: 1px durchgezogen #A059CB; Hintergrundfarbe: #FFFFFF; Z-Index: 10; Anzeige: keine; } .beiseite li:hover{ Rahmen links: 4px durchgezogen #A059CB; Rahmen oben: 1px durchgezogen #A059CB; Rahmen unten: 1px durchgezogen #A059CB; Polsterung links: 10px; Rand links: 20px; Hintergrundfarbe: #FFFFFF; } #sub div,#sup div, #cyc div,#fin div, #hun div,#cam div,#fit div, #mus div{ Rand links: 20px; } js-Code: // Li nach Klassennamen abrufen var lis = document.getElementsByClassName("sna"); //Durchlaufe die li-Tags mit dem Klassennamen sna for(var i = 0;i<lis.length;i++){ //Mausbewegungsereignis für li registrieren lis[i].onmouseover = function(){ /* dies: li mit Klassennamen sna */ //konsole.log(dies); /* this.children: Holt die untergeordneten Elemente unter dem Tag „li“*/ // Konsole.log(diese.Kinder); var nächstes = diese.Kinder; //next[1]: Unter den beiden Unterelementen unter li ist der Index der Beschriftung des anzuzeigenden Elements 1 nächste[1].style.display = "Block"; }; //Mouse-Out-Ereignis für li registrieren lis[i].onmouseout = function(){ var nächstes = diese.Kinder; nächste[1].style.display = "keine"; }; } 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:
|
<<: Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen
>>: Docker-Pull-Image und Tag-Vorgang Pull | Tag
Inhaltsverzeichnis 1. Lösung 1 (UDF) Demo-Fall 2....
Tabellenstruktur und deren Daten kopieren Die fol...
Wirkung: CSS-Stil: <style type="text/css&...
Inhaltsverzeichnis Einführung 1. MySQL Master-Sla...
Inhaltsverzeichnis Kein Schalter, keine komplexen...
1. Erstellen Sie die MySQL-Datenbank nacos_config...
<br />Gestalten Sie Ihre Website wissenschaf...
Inhaltsverzeichnis Vorwort: 1. Einführung in die ...
Konzepteinführung : 1. px (Pixel): Dies ist eine ...
Schwierigkeit Erstellung von zwei Masken für SVG-...
In diesem Artikel wird der spezifische Code von V...
1. Einführung in mysqldump mysqldump ist ein logi...
Der Ursprung des Problems Das erste Mal, dass ich...
Vorwort Bei der Linux-Kernel-Programmierung werde...
In diesem Artikelbeispiel wird der spezifische Co...