Hover bei Tabelle

    Hey,


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


    Ich habe eine Tabelle mit 3 Spalten.


    <tr class="gesamt">
    <td>Bild1</td>
    <td>Bild2</td>
    <td>Text</td>
    </tr>


    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

    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 <3

    #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



    Einmal editiert, zuletzt von Tomsen ()