✔ Hover auf img anwenden

[Microhome]

Guten morgen ihr Lieben,
hab mal eine spezielle Frage zu CSS. Ich habe eine Tabelle mit x Zeilen uns zwei Spalten. Ist eine Art Menüleiste. In der linken Spalte steht jeweils ein Text und in der rechten ein Bild. Wenn ich nun über den Text fahre möchte ich, dass sich die Hintergrundfarbe von dem Bild ändert. Wie kann ich das realisieren?

<table>
<tr>
<td width="200"><a href="#">Hier der 1. Link</a></td><td><img 

src="./grafik1.gif"></td>
</tr>
<tr>
<td width="200"><a href="#">Hier der 2. Link</a></td><td><img 

src="./grafik2.gif"></td>
</tr>
<tr>
<td width="200"><a href="#">Hier der 3. Link</a></td><td><img 

src="./grafik1.gif"></td>
</tr>
</table>

Soweit so gut. Aber wie kann ich in CSS sagen, dass sich bei einem :hover der Links die Hintergrundfarbe (background-color) von dem entsprechenden Bild ändern soll? Ist das vielleicht mit Tabellen in Tabellen mörglich oder gibts dafür 'ne ganz simple Lösung? Ich möchte kein JS!


mit Dank für Tipps,
m!cro

 

[tobee]

Wenn das BIld nicht transparent ist, wird nicht so einfach mit dem backgroundColor.
Einfächer wäre da einfach zwei versch. Bilder zu nehmen.

 

[Microhome]

Naja das Bild bekommt ja noch nen Padding auf allen Seiten, sodass es kein Problem ist. Es geht mir auch gar nicht darum, ob Background oder iregndwas anderes, sondern darum, wie ich mit einem hover über den Link das Verhalten der Grafik in der anderen Spalte steuern kann.


lg
m!cro

 

[franz007]

Stichwort javascript

entweder du machst das Bild Transparent und lässt den background durchscheinen den du dann änderst, hast aber Probleme mit dem IE weil er bei pngs Probleme macht.

Oder du tauschst gleich das ganze Bild aus, das kann sogar der IE.

 

[Leola13]

Hai,

schau doch einmal bei Stu Nichols vorbei. Da gibt es jede Menge verblüffende Sachen mit CSS.

Da sollte auch etwas für dein Problem dabei sein.

Ciao Stefan

 

[Microhome]

Okay, da schau ich mal. Danke für den Link.
@franzspam: Ich hatte oben extra geschrieben kein JS..

Danke erstmal. Wenn ihr noch Ideen habt immer her damit.


//Edit: Hab auf Stu Nichols nichts entsprechendes gefunden. Ist das nicht
möglich oder wieso finde ich nichts im Web dazu

m!cro

 

[versuch13]

Ohne JavaScript ist das nicht möglich. Du kannst mit :hover nur Elemente innerhalb eines Links ansprechen.

 

[Microhome]

Aber kann ich nicht irgendwie die Tabelle in einen Link packen und dann für jedes hover die backgroundfarbe vom image ändern?

 

[dirkgently]

Hi!

Warum machst du nicht eine breite Spalte und machst die Bilder entsprechend
breiter.
Dann kannst du das einfach mit einem mouse over realisieren.
So gehts auf alle fälle.

Grüße

 

[deepthroat]

Ohne JavaScript ist das nicht möglich. Du kannst mit :hover nur Elemente innerhalb eines Links ansprechen.

Das ist nicht ganz korrekt. Die Pseudoklasse :hover funktioniert laut W3C Empfehlung auch bei anderen Elementen und nicht nur bei Verweisen. Allerdings nicht im IE.

@Microhome: Das ganze liesse sich durchaus mit CSS2 bewerkstelligen. Allerdings funktioniert das dann nicht beim IE:

td:first-child:hover + td img { background-color: red; }

Gruß