Css Zmień kolor tła td po najechaniu kursorem na inny - html, css, css3

Próbuję zmienić kolor tłaProduct_image, gdy unoszę całą nazwę tabeli. Rezultatem, który próbuję osiągnąć, jest zmiana koloru tabeli w dymku, obraz produktu td zmienia się również w innym kolorze.

Widziałem podobne posty: Dokonaj zmiany div css po najechaniu innym div

Ale nie pracowałeś na mnie.

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;
}

Próbuję to osiągnąć tylko za pomocą css. Z góry dziękuję.

Odpowiedzi:

1 dla odpowiedzi № 1

Pomiń znak +. Jest to sąsiadujący selektor rodzeństwa. Div, który chcesz zmienić, to dziecko stołu, a nie rodzeństwo.

---

0 dla odpowiedzi nr 2

Zrobiłem coś podobnego z moją strukturą. Oto przykład

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

więc w twoim przypadku powinno

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

---

0 dla odpowiedzi № 3

Usunąć + znak:

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

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

Zobacz skrzypce.

Objaśnienie: + znak wybiera tylko sąsiadujące rodzeństwo. Zobacz to małe skrzypce aby zrozumieć ten selektor.

---

0 dla odpowiedzi nr 4

Cóż, jesteś bardzo blisko właściwego rozwiązania. Spróbuj tego: usuń symbol „+” i wykonaj taki wiersz:

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

Tak więc mówisz: na stole hover zmień kolor tła td z klasą „Product_image” nawet nie potrzebujesz! ważnego

---