Anzeige unterschiedlicher Inhalte bei Hover/Mouseover
zwerg Alex
- css
0 suit0 zwerg Alex0 suit
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
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
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.
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
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