Css Change Hintergrundfarbe eines TD auf Hover eines anderen - html, css, css3

Ich versuche, die Hintergrundfarbe von zu ändernProduktbild, wenn ich über den gesamten Tabellennamen schwebe. Das Ergebnis, das ich zu erreichen versuche, ist, wenn die Tabelle die Farbe beim Schweben ändert, das Produktbild auch zu ändern, aber mit einer anderen Farbe.

Ich habe ähnliche Beiträge gesehen: Nehmen Sie eine Div CSS-Änderung vor, wenn Sie den Mauszeiger über eine andere Div halten

Hat aber nicht an mir gearbeitet.

HTML:

<div class="row">
<table class="Tablename">
<tbody><tr>
<td class="Product_image"><div class="Product_image"><a title=""><img src="/images/"></a></div></td>
<td class="Product_name"><div class="Product_name"><a href=""</a></div></td></tr>
</tbody></table>
<div class="clear"></div>
</div>

CSS:

.Tablename:hover{ background-color:#fff}
.Tablename:hover + .Product_image  {
background-color:#21825B !important;
}

Ich versuche dies nur mit CSS zu erreichen. Danke im Voraus.

Antworten:

1 für die Antwort № 1

Überspringen Sie das + Zeichen. Es ist der benachbarte Geschwisterwähler. Das Div, das Sie ändern möchten, ist ein Kind des Tisches, kein Geschwister.

---

0 für die Antwort № 2

Ähnliches habe ich mit meiner ul li Struktur gemacht. Hier ist das Beispiel

#main_nav.sf-menu li ul li:hover a{ color:#fff;}

so sollte es in deinem Fall sein

.Tablename:hover{ background-color:#fff}
.Tablename:hover Product_image  {
background-color:#21825B !important;
}

---

0 für die Antwort № 3

Entferne das + Schild:

.Tablename:hover {
background-color: #fff
}

.Tablename:hover .Product_image {
background-color: #21825B !important;
}

Sieh dir das an Geige.

Erklärung: Die + Zeichen wählt nur benachbarte Geschwister aus. Sehen Sie diese kleine Geige um ein Verständnis für diesen Selektor zu bekommen.

---

0 für die Antwort № 4

Dann sind Sie der richtigen Lösung sehr nahe. Versuche dies: entferne das "+" Symbol und mache die Zeile so:

.Tablename:hover td.Product_image  {
background-color:#21825B !important;
}

Du sagst also: auf dem Tisch schwebst, ändere die Hintergrundfarbe des td mit der Klasse "Product_image" du brauchst das gar nicht! wichtig

---