js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte

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:
  • js Mausklick-Taste zum Wechseln von Bildern - Bilder wechseln automatisch - Klicken Sie auf die linke und rechte Taste, um den Spezialeffektcode zu wechseln
  • JS wechselt Bilder, wenn die Maus darüber bewegt wird
  • Ein einfacher JS-Mouseover-Umschalteffekt
  • JS+DIV-Methode, um den Effekt des Ebenenwechsels durch Mouseover zu erzielen
  • js, um den Effekt des Scrollens mit dem Mausrad zum Wechseln der Seiten zu erzielen (ähnlich dem standardmäßigen Seiten-Scrollen-Umschalteffekt von 360)
  • js Mausklick Bildwechseleffekt Code teilen
  • js implementiert die Methode zum Wechseln von Bildern durch Ziehen der Maus
  • Implementierungscode für den Bildumschalteffekt von js mit der Maus klicken
  • JS+DIV-Beispielcode zum Erzielen des Effekts des Ebenenwechsels beim Überfahren mit der Maus
  • Einfache JavaScript-Methode zum Wechseln von Bildern durch Bewegen der Maus

<<:  Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen

>>:  Docker-Pull-Image und Tag-Vorgang Pull | Tag

Artikel empfehlen

Drei Möglichkeiten zum Kopieren von MySQL-Tabellen (Zusammenfassung)

Tabellenstruktur und deren Daten kopieren Die fol...

Sie müssen wahrscheinlich keine Switch-Anweisungen in JavaScript verwenden

Inhaltsverzeichnis Kein Schalter, keine komplexen...

So konfigurieren Sie MySQL8 in Nacos

1. Erstellen Sie die MySQL-Datenbank nacos_config...

Bietet hilfreiche Vorschläge zur Verbesserung des Website-Designs

<br />Gestalten Sie Ihre Website wissenschaf...

Einführung in MySQL-Rollenfunktionen

Inhaltsverzeichnis Vorwort: 1. Einführung in die ...

Beispielcode zur Realisierung des Ladeeffekts der B-Station mit CSS+SVG

Schwierigkeit Erstellung von zwei Masken für SVG-...

Vue implementiert eine Wettervorhersagefunktion

In diesem Artikel wird der spezifische Code von V...

So verwenden Sie mysqldump zum Sichern von MySQL-Daten

1. Einführung in mysqldump mysqldump ist ein logi...

Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung

Vorwort Bei der Linux-Kernel-Programmierung werde...

Vue realisiert Bildwechseleffekt

In diesem Artikelbeispiel wird der spezifische Co...