Anzeige unterschiedlicher Inhalte bei Hover/Mouseover

[zwerg Alex]

Glück auf!

Ich möchte auf einer privaten Homepage umsetzen, dass ich links einige Bilder (ca. 9-12) habe und sich bei Mouseover über eines der Bilder der Inhalt einer Box rechts daneben ändert; idealerweise sogar zweier Boxen.

Weiß gerade nicht besser, wie ich das in Worten ausdrücken soll, aber ich hoffe diese Grafik veranschaulicht mein Ziel:

Also im Prinzip 3 "Boxen", wo sich die Box in der Mitte und die  rechte Box in Abhängigkeit zur ersten verändert bzw. wo dort gerade ein Hover/Mouseover ist.

Ich habe so etwas in der Art schon mal gesehen (da aber nur mit Bildern), weiß aber nicht mehr wo und damals hat mich noch nicht interessiert, wie das umgesetzt wurde.

Ich hoffe auf eine CSS-Lösung, ohne Javascript und bin für jeden Tipp dankbar.

Freundliche Grüße
Zwerg Alex

[suit]

Ich hoffe auf eine CSS-Lösung, ohne Javascript und bin für jeden Tipp dankbar.

die css lösung ist die pseudoklasse :hover

im falle javascript suchst du die eventhandler onmouseover und onmouseout

[zwerg Alex]

Hallo Suit!

Ich hoffe auf eine CSS-Lösung, ohne Javascript und bin für jeden Tipp dankbar.

die css lösung ist die pseudoklasse :hover

Das ist mir bewusst (wie mein Betreff ja vlt. auch hat erahnen lassen). Ich weiß auch, wie ich bsp. das aussehen eines Textes o. ä. damit verändere (das ist ja auch recht häufig und gut im Internet beschrieben). Was ich aber nicht weiß, wie ich in meinem Beispiel immer den Text (in Box 2) bzw. das Bild (in Box 3) anzeigen lassen kann, welches sich auf das Bild bezieht, auf dem links (Box 1) die Maus steht.

im falle javascript suchst du die eventhandler onmouseover und onmouseout

Lieber wäre mir nach wie vor auf JS zu verzichten.

[suit]

Das ist mir bewusst (wie mein Betreff ja vlt. auch hat erahnen lassen). Ich weiß auch, wie ich bsp. das aussehen eines Textes o. ä. damit verändere (das ist ja auch recht häufig und gut im Internet beschrieben). Was ich aber nicht weiß, wie ich in meinem Beispiel immer den Text (in Box 2) bzw. das Bild (in Box 3) anzeigen lassen kann, welches sich auf das Bild bezieht, auf dem links (Box 1) die Maus steht.

.textschnipsel li {  
  position: relative;  
}  
  
.textschnipsel li span {  
  display: none;  
  color: red;  
  position: absolute;  
  top: 1.5em;  
  left: 0;  
}  
  
.textschnipsel li:hover span {  
  display: block;  
}

<ul class="textschnipsel">  
 <li>vorschau <span>rest des texts</span></li>  
 <li>vorschau2 <span>rest des zweiten texts</span></li>  
</ul>

nicht getestet

und beachte, dass die :hover-pseudoklasse in älteren ie-versionen ausschließlich auf a-elementen funktioniert

[zwerg Alex]

Hallo Suit,

vielen Dank für deine Hilfe. Hab in den letzten Tagen leider keine Zeit gehabt, weiter an dem Problem zu arbeiten. Deshalb auch jetzt erst mein Dankeschön.

Werde das sobald ich Zeit habe ausprobieren.

Freundliche Grüße
zwerg Alex