Hover bei Tabelle

Tomsen · 28. Juni 2013

Hey,

ich will einen Hovereffekt erzielen und dabei eine Bildänderung.

Ich habe eine Tabelle mit 3 Spalten.

Beim hover von class="gesamt" soll das bild2 verändert werden. Wie stell ich das an?

Können CSS Klammerin in einander greifen, also zB

.gesamt {
.bild2 {

}
}

?

Sodass ich bei hover gesamt von bild2 das background-image ändern könnte?

- Tom

rinukkusu · 29. Juni 2013

Entweder du löst das driekt im CSS, dann muss das Bild aber via CSS als background-image gesetzt werden:

Code

.gesamt .bild2 {
    background-image: url('pfad/zum/bild2_a.jpg');
}


.gesamt .bild2:hover {
    background-image: url('pfad/zum/bild2_b.jpg');
}

Oder sonst via JavaScript:

Code

<tr class="gesamt">
    <td>Bild1</td>
    <td onmousemove="this.style.backgroundImage = 'url(pfad/zum/bild2_b.jpg)';" onmouseout="this.style.backgroundImage = 'url(pfad/zum/bild2_a.jpg)';">Bild2</td>
    <td>Text</td>
</tr>

Kann sein, dass der Code unter Umständen fehlerhaft ist, aber so in der Art sollte es klappen

Tomsen · 29. Juni 2013

#edit: Habs hinbekommen. Bisschen mit der Tabelle getrickst.

Eine Frage aber noch, wie mach ich es das nicht nur beim mouseover mit der Maus die transition funktioniert sondern auch beim mousout. Also wenn man runtergeht es nicht so ruckartig wieder opacity 0.5 bekommt sondern von 1.0 auf 0.5 mit Übergang runter geht.

- Tom

xGreekz7x · 29. Juni 2013

Du machst die Transition nicht beim Hover rein sondern beim normalen, und beim Hover
setzt du einfach das gewünschte Attribut.

breadfish.de 12. März 2022