suit: Anzeige unterschiedlicher Inhalte bei Hover/Mouseover

Beitrag lesen

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