Question

当我将整个表名称悬停时，我正在尝试更改Product_image的背景颜色。我试图实现的结果是当表格在悬停时改变颜色时，产品图像td也会改变，但是还有其他颜色。

我看到了类似的帖子：Make a div css change when hover an other div

但是没有对我有用。

HTML：

<div class="row">
    <table class="Tablename">
    <tbody><tr>
    <td class="Product_image"><div class="Product_image"><a title=""><img src=""></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;
 }

我试图用css实现这个目标。提前谢谢。

Answer 1

略过+号。它是相邻的兄弟选择器。你想要改变的div是桌子的孩子，而不是兄弟姐妹。

Answer 2

删除+标志：

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

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

请参阅此fiddle。

说明：+符号仅选择相邻的兄弟姐妹。 See this small fiddle了解此选择器。

Answer 3

我的ul li结构做了类似的事情。这是示例

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

所以在你的情况下应该

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

Answer 4

嗯，你非常接近正确的解决方案。试试这个：删除＆＃34; +＆＃34;符号并使这样的行：

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

所以你说：在桌面上悬停用类＆＃34; Product_image＆＃34;更改td的背景颜色。你甚至不需要！important

Css在另一个悬停时更改td的背景颜色

4 个答案: