✔ Hover soll Inhalt eines CSS-Elements ändern

[Leoplay]

Guten Abend

Ich mach das mal so kurz wie möglich.

Ich will gerne mit Javascript den Inhalt einer CSS-Klasse ändern, wenn ich über ein anderes Element rüber gehe mit der Maus. Also ein Mouseover. Das Problem ist, dass ich mit CSS schachteln müsste, damit ich den Inhalt eines anderen Elementes ändern kann. Leider liegt die "Inhaltsbox" außerhalb der anderen Elemente.

Ich habe insgesamt 6 Boxen für die ich jeweils eine Mouseover-funktion erstellen will. Jede soll in dem CSS-Element "Inhaltsbox" ein individuellen Text einfügen, sollte man über diese rübergehen.

Ich wäre über ein wenig Hilfe sehr erfreut, da ich mich leider gar nicht mit Javascript auskenne!

Hier mein akuteller code allerdings aufs notwendige begrenzt:

   <div id="menu">
     <a class="menubox" href=""></a>
     <a class="menubox" href=""></a>
     <a class="menubox" href=""></a>
     <a class="menubox" href=""></a>
     <a class="menubox" href=""></a>
     <a class="menubox" href=""></a>
   </div>
     <div class="menutxt"></div>

  #menu {
  width: 425px;
  margin: 0;
  height: 420px;
  }
  a.menubox {
  width: 425px;
  height: 45px;
  display: block;
  margin-bottom: 30px;
  }
  .inhaltsbox {
  width: 425px;
  height: 45px;
  font: 27pt arial;
  margin-top: 30px;
  }

 

[SpiceLab]

Wo genau innerhalb der HTML-Struktur befinden sich derzeit die nachträglich anzuzeigenden Texte?

Je nach Umfang liessen sich diese auch innerhalb der Links einbetten / verstecken, und so per CSS anzeigen - Stichwort: CSS Popup

Nachtrag -21:55h-

Hab die Exemplare nach langer Abstinenz eben nochmal im einzelnen gesichtet, denn ich wußte, da war noch was - mit Hilfe einer absoluten Positionierung können die "Popups" nämlich auch an einem zentralen Ort angezeigt werden: Pure CSS PopUps

 

[Leoplay]

@spicelab

Da hab ich tatsächlich noch den anderen Code eingefügt

Also in dem CSS soll der Inhaltsbereich den Bereich mit dem Inhaltstext definieren Im HTML hab ich die Klasse nur unter menutxt genutzt.

Ich möchte halt gerne, dass bei einem Hover, über eine Menü-Box, in dem Element Inhaltstext, ein jeweiliger Text drin steht wie "Impressum" oder "Galerie". Das Problem welches sich mir gestellt hatte, war, dass wenn man bei einem reinen CSS-Hover die Eigenschaften eines anderen Elementes verändern will, dieses innerhalb dieses liegen muss.

Mein Inhaltstext befindet sich aber außerhalb der Menüboxen

 

[Quaese]

Hi,

ich habe dir hier ein Beispiel erstellt, wie es mit JavaScript aussehen könnte.

Ciao
Quaese

 

[Leoplay]

@Quaese
Das klappt ja perfekt! Allerdings nur als Frage: Ist es nicht eher unsicher ein element über den Namen anzusprechen?

Nachtrag - 19:06 Uhr :

Geht es auch, dass die "menutxt" nichts anzeigt, sollte kein Element angesprochen sein durch das mouseover?

 

[Quaese]

Hi,

du kannst doch an den Elementen, an denen ein onmouseover registriert wurde, ein onmouseout registrieren und in diesem Event die innerHTML-Eigenschaft mit einem Leerstring füllen.

Ciao
Quaese